jQuery .show() a flex box

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

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

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/

Related