title: Which CSS selector can be used to select a flex box item in wrapped state?
body: <p>I have a <code>display:flex</code> row with 3 columns and <code>flex-wrap</code> is enabled. Between the columns are handle <code>div</code>s. When the columns are wrapped the handle <code>div</code>s should disappear. How can I use the wrap-state as a CSS selector to define attributes for that case, that the flex items are wrapped?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section {
    display: flex;
    flex-wrap: wrap;
    background-color: lightgray;
  }
  section * {
    margin: 1ex;
    background-color: white;
  }
  section * ~ * {
    margin-left: 0;
  }
  .handle {
    width: 1ex;
    background-color: gray;
  }
  aside, article {
    flex: 1;
    min-width: 5em;
  }
  #wide {
    width: 30em;
  }
  #narrow {
    width: 10em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="wide"&gt;
    &lt;aside&gt;
      left
    &lt;/aside&gt;
    &lt;div class="left handle"&gt;&lt;/div&gt;
    &lt;article&gt;
      middle
    &lt;/article&gt;
    &lt;div class="right handle"&gt;&lt;/div&gt;
    &lt;aside&gt;
      right
    &lt;/aside&gt;
  &lt;/section&gt;
  &lt;hr&gt;
  &lt;section id="narrow"&gt;
    &lt;aside&gt;
      top
    &lt;/aside&gt;
    &lt;div class="left handle"&gt;&lt;/div&gt;
    &lt;article&gt;
      middle
    &lt;/article&gt;
    &lt;div class="right handle"&gt;&lt;/div&gt;
    &lt;aside&gt;
      bottom
    &lt;/aside&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In non-wrapped mode I need to suppress the left margin and in wrapped-mode the top margin and the handles must be suppressed. How to know when being wrapped?</p>