title: Responsive flexbox - change margins from horizontal to vertical after wrapping?
body: <p>I have a simple layout concept that can be summarized by this picture:
  <img src="https://i.stack.imgur.com/zorO2.png" alt="before wrapping"></p>
  
  <p>This can be easily achieved using <code>flexbox</code>. As you can see, the div #1 and div #3 touch the borders of their container. Also, the margin between div #1 and div #2 is equal to the margin between div #2 and div #3. It can be done with:</p>
  
  <pre><code>.inner-div{
     margin-left:10px;
  }
  
  .inner-div:first-child{
      margin-left:0px;
  }
  </code></pre>
  
  <p>Now, let say that the viewport's width decreases. I want those divs to wrap to form a nice column. And I'd like them to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Yoesd.png" alt="desirable"></p>
  
  <p>But if those divs retain their horizontal margin configuration, they look something like this instead:</p>
  
  <p><img src="https://i.stack.imgur.com/7tMLq.png" alt="undesirable"></p>
  
  <p>Which, as you can guess, is undesirable.</p>
  
  <p>How to change margins for those inner divs when their container is so narrow that they get "wrapped"? Is there a way to write a conditional rule that would apply only to "wrapped" divs? Or am I missing the point and the solution is very obvious and I just overlooked that part of <code>flex-box</code> capabilities?
  I'd like to see a solution that would not involve predicting what container/screen width would case the layout to change from row to column, because I think that is the most maintainable option.</p>