jQuery .show() a flex box

Jquery Problem Overview

I have an element with a flexbox

<ul id="myFlexbox">

div#myFlexbox{
    display:flex;
}

after hide it and show it, it gets messed up.

$('#myFlexbox').show();

now the element has a display of block instead of flex.

<ul id="myFlexbox" style="display: block;">

How can I use .hide and .show with flexboxes?

Jquery Solutions

Solution 1 - Jquery

The show() adds display:block as a default for div. You can change the display to flex using jQuery css():

$('#myFlexbox').css('display', 'flex');

Solution 2 - Jquery

JQuery .show() doesn't know about your display: flex; (not flexbox). Instead try to add and remove a hiding class.

CSS:

#myFlexbox{
  display: flex;
}

.hide{
  display: none !important;
}

JS:

$('#myFlexbox').addClass('hide');
$('#myFlexbox').removeClass('hide');

https://jsfiddle.net/p2msLqtt/

Otherwise you have to execute your JS after the CSS is completely loaded and DOM is ready I guess - i.e. like:

<html>
  <head>
    <!-- CSS -->
  </head>
  <body>
    <!-- BODY PART -->
    <!-- SCRIPT TO HIDE AND SHOW -->
  </body>
</html>

Updated the fiddle and set Javascript execution to domready - it's working:

https://jsfiddle.net/p2msLqtt/1/

Solution 3 - Jquery

just use

.class{display: none}

.class[style*='display: block']{
    display: flex !important;
}

when jquery add styl attribut css will be applied, works perfectly on Chrome and Mozilla

Solution 4 - Jquery

You should wrap your display: flex content with an element.

<div id="flexWrapper">
    <ul id="myFlexbox"></ul>
</div>

bind your javascript show/hide to '#flexWrapper'

Solution 5 - Jquery

Since other answers did not account for the possibility that you might be using the duration argument...

Short Answer: Use .hide for hiding the value and that shouldn't happen.

A little explanation:

> The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of flex and is hidden then shown, it will once again be displayed flex.

_{From documentation, Changed 'inline' to 'flex' to fit the contenxt!}

So jQuery knows what you're hiding! If you've hidden it using .hide that is, And it knows how to show it again with the right display value.

Solution 6 - Jquery

I know it is a little too late (3 years) but this is the way I managed to do it.

I created a rule in css for my div, for example #myDiv, that goes like this

#myDiv[style*='block'] {
    display: inline-flex !important;
}

It takes advantage of what jQuery does to the DOM, it applies 'display:block'. I used inline-flex because i needed it for what i'm doing, but it can be whatever you want. In this way the rule goes faster applied without any flickering.

Solution 7 - Jquery

The idea is to create a custom function showFlex() similar to jQuery show() and call it with the element which need to have the display:flex; property.

jQuery Solution

$.fn.showFlex = function() {
  this.css('display','flex');
}

$('#myFlexbox').showFlex();

JavaScript Solution

Object.prototype.showFlex = function() {
	this.style.display = 'flex';
}

document.getElementById('myFlexbox').showFlex();

Hope this helps.

Solution 8 - Jquery

The class solution works, yes. Here's a different approach I came up with:

Javascript Function

function showFlex(element) {

    var flexContainer = document.getElementById(element);

    flexContainer.setAttribute("style", "display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;");
}

###To use it:

showFlex( "yourIDhere" );

> Note that the ID doesn't need the # when you call the function.

Example:

https://codepen.io/florantara/pen/aLeyYb/

Solution 9 - Jquery

$('#myFlexbox').show({
    start: function() {
        $(this).css('display', 'flex');
    }
});

Solution 10 - Jquery

Try $(this).show().css('display', 'flex');

Show it normally and set it back to flex

Content Type	Original Author	Original Content on Stackoverflow
Question	Running Buffalo	View Question on Stackoverflow
Solution 1 - Jquery	guizo	View Answer on Stackoverflow
Solution 2 - Jquery	mxlse	View Answer on Stackoverflow
Solution 3 - Jquery	Nikolay	View Answer on Stackoverflow
Solution 4 - Jquery	ecoble	View Answer on Stackoverflow
Solution 5 - Jquery	aliqandil	View Answer on Stackoverflow
Solution 6 - Jquery	Pedro Acosta Pilataxi	View Answer on Stackoverflow
Solution 7 - Jquery	Gibin Ealias	View Answer on Stackoverflow
Solution 8 - Jquery	fanta	View Answer on Stackoverflow
Solution 9 - Jquery	Jeen Jay	View Answer on Stackoverflow
Solution 10 - Jquery	ErickBest	View Answer on Stackoverflow