title: In css select first child *of each line* with wrapped flexboxes (first-column?)
body: <p>I have a flexbox that is basically a "list of sub divs". The box' main feature is the automated wrapping. However I notice that, due to children's wrapping value, there is also an offset to the left of the box.</p>
  
  <p>I wish to remove this. I've tried doing this by giving the container a negative padding: however that seems to be disallowed.</p>
  
  <p>Then I tried to find a selector for the "first child on each line", but that also failed. Is there a way to do this in css?</p>
  
  <p>Alternatively, an a grid <code>display: grid</code> be made to have variable width columns, and automatically calculate the number of columns based on the content (thus: wrapping).</p>
  
  <p>Example below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cont {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    border: solid 1px red;
    padding-left: -16px;
    justify-content: 'center';
  }
  
  .cell {
    min-width: 20%;
    border: solid 1px black;
    margin: 8px 16px 8px 0;
  }
  .wide2 {
    min-width: calc(50% - 2px);
  }
  .wide {
    width: calc(50% - 16px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cont"&gt;
    &lt;div class="cell wide"&gt;
      wide
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      test
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      test
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      test second line, should also have zero margin to left
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="cont"&gt;
    &lt;div class="cell wide"&gt;
      wide
    &lt;/div&gt;
    &lt;div class="cell wide2"&gt;
      this should line up,&lt;br&gt; iff margin right is no longer there
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>