title: Have a flexbox hidden like display:none and then show it later
body: <p>My issue is, I have a flexbox</p>
  
  <pre><code>&lt;style&gt;
    .popup {
      height:50%;
      width:50%;
      background-color: rgba(99,148,236,0.7);
      border: 2px solid white;
      border-radius: 5vw;
  display:flex;
  flex-direction:column;
  align-content: space-evenly;
      }
      .popup svg line {
      stroke-width: 2;
      stroke: white;
      fill: none;
  }
  &lt;/style&gt;
  &lt;html&gt;
  &lt;span id='save_popup'&gt;
  &lt;span style='display:flex;flex-direction:row;align-items:center;z-index:22;width:100%;height:100%;'&gt;
  &lt;span style='display:flex;flex-direction:column;justify-content: center;align-items:center;z-index:22;width:100%;height:100%;'&gt;
   &lt;span class='popup' style='z-index:22;'&gt;
      &lt;svg id='close_popup' xmlns="http://www.w3.org/2000/svg" width="2vw" height="2vw" style='z-index:23;position:relative;margin-top:4vh;margin-left:90%;'&gt;
      &lt;line class="a" x1="0" y1="1vw" x2="1vw" y2="0"&gt;&lt;/line&gt;
      &lt;line class="b" x1="1vw" y1="1vw" x2="-1vw" y2="-1vw"&gt;&lt;/line&gt;
      &lt;/svg&gt;
      &lt;p id='savings_popup_p1' style='font-size:3vw;margin:auto;'&gt;You Saved&lt;/p&gt;
      &lt;p id='savings_popup_p2' style='margin:auto;font-family:roboto;max-width:55%;'&gt;&lt;/p&gt;
      &lt;p id='savings_popup_p3' style='margin:auto;font-family:roboto;max-width:55%;0.9em;'&gt;&lt;/p&gt;
      &lt;p id='savings_popup_p4' style='margin:auto;font-family:roboto;font-size:0.9em;'&gt;*This is a preliminary estimate, please contact us to discuss more&lt;/p&gt;
   &lt;/span&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to have it hidden, but visibility:hidden; means it still messes up the positioning of the rest of the page when the preloader comes up:</p>
  
  <pre><code>&lt;div id='preloader_cover' style='display:flex;flex-direction:column;background-color:black;width:100%;height:100%;z-index:1000;'&gt;
   &lt;div id='preloader_circle' style='display:inherit;border-radius:50%;border:3px solid white;margin:auto;width:18vw;height:18vw;
   background-color:cornflowerblue;'&gt;
      &lt;img id='preloader_logo' src='logo.png' style='margin:auto;width:10vw;height:10vw;'/&gt;
   &lt;/div&gt;
   &lt;p id='preloader_p' style='margin: 10vh auto;font-size:4vh;font-family:Montserrat;color:white;'&gt;Loading assets..&lt;/p&gt;
   &lt;progress id='preloader_prog' max='100' value='10' style='margin: 5vh auto;height:2vh;width:60%;border-radius:0.8vh;color:white;background-color:background-color:rgba(99,148,236,0.7);
   gray;opacity:0.9;'&gt;&lt;/progress&gt;
  
  &lt;/div&gt;
  
  </code></pre>
  
  <p>using .hide() and .show() work the same behind the scenes, and I can't use normal display:block for other reasons.</p>
  
  <p>using display:none; in the style, then</p>
  
  <pre><code> $('#save_popup').css('display','flex');
  </code></pre>
  
  <p>doesn't work either, I need to have this working as you'd expect, ie, the preloader covers full screen, the css acts like the popup isn't on the page at all, not just hidden.</p>
  
  <p>but with the ability to toggle it showing on screen, any help appreciated.</p>