jQuery .show() a flex box

Question

I have an element with a flexbox

div#myFlexbox{
    display:flex;
}

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

Answer 1

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:

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

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