title: Set display:flex as the default for a display:none element in css?
body: <p>Is there any way to set an element to <code>display:none</code> to initially hide it and also specify that, when the element is shown later by JavaScript, it be shown as <code>display:flex</code>?</p>
  
  <p><strong>Example CSS</strong>:</p>
  
  <pre><code>#Container{
     display:flex;
     display:none;    
  }
  </code></pre>
  
  <p><strong>Example jQuery</strong>:</p>
  
  <pre><code>$('#Container').show();
  </code></pre>
  
  <p>Desired behavior: This shows the element as <code>display:flex</code> <em>without</em> hard-coding a value of <code>flex</code> in JavaScript.</p>
  
  <p><em>Note: I am well aware that I can simply set the element to <code>display:flex</code> with jQuery's CSS method. However, the goal is to separate functionality from presentation, and whether an element is flex or block or inline is not the business of the JavaScript code. JavaScript's job is simply to show or hide it, not to change how the page is presented.</em></p>
  
  <p><em>I'm also aware that I could wrap the <code>display:flex</code> element in a <code>display:none</code> element and show and hide the outer wrapper. But I'm curious to know if there is a clever way of achieving this without adding extra divs around every pane.</em></p>