title: Flexbox on iOS 8 - boxes collapse
body: <p>Using mediaqueries, on an iPad, landscape looks good with <code>flex-direction: row</code>. As soon as I turn to portrait (<code>flex-direction: column</code>) everything goes weird and collapses.</p>
  
  <p>I use Codekit to compile my SCSS, with Autoprefixer running.</p>
  
  <p>Here's my code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;h3&gt;&lt;a href="#"&gt;Project A&lt;/a&gt;&lt;/h3&gt;
      &lt;a href="#" class="project-thumb"&gt;
        &lt;img src="/forrest.jpg"&gt;
      &lt;/a&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet…&lt;/p&gt;
      &lt;p&gt;&lt;a class="read-more" href="#"&gt;Read More&lt;/a&gt;&lt;/p&gt;
    &lt;/li&gt;
    &lt;li&gt;…&lt;/li&gt;
    &lt;li&gt;…&lt;/li&gt;
    &lt;li&gt;…&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>SCSS:</strong></p>
  
  <pre><code>ul {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
  
    @media screen and (min-width: 50em) {
      flex-direction: row;
    }
    li {
      display: flex;
      flex-direction: column;
      flex: 0 0 100%;
  
      @media screen and (min-width: 50em) {
        flex: 0 0 49%;
      }
      &gt; a {
        margin-top: auto;
      }
      h3 {…}
      h3 a {…}
      p {…}
    }
    .read-more {
      margin-top: auto;
      align-self: flex-end;
      text-align: right;
    }
  }
  </code></pre>
  
  <p>You can have a look at it here: </p>
  
  <p>Codepen: <a href="http://codepen.io/achoukah/pen/pgEVmq" rel="nofollow">http://codepen.io/achoukah/pen/pgEVmq</a></p>
  
  <p>On my site: <a href="http://anwarchoukah.com/projects" rel="nofollow">http://anwarchoukah.com/projects</a></p>