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

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.