iOS 8上的Flexbox -盒崩溃

Question

使用媒体，在iPad上，景观看起来很好与flex-direction: row。一旦我转向肖像画(flex-direction: column)，一切都会变得怪异和崩溃。

我使用Codekit编译我的SCSS，并运行自动重定位程序。

这是我的密码：

HTML:

<ul>
  <li>
    <h3><a href="#">Project A</a></h3>
    <a href="#" class="project-thumb">
      <img src="/forrest.jpg">
    </a>
    <p>Lorem ipsum dolor sit amet…</p>
    <p><a class="read-more" href="#">Read More</a></p>
  </li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>

SCSS:

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%;
    }
    > a {
      margin-top: auto;
    }
    h3 {…}
    h3 a {…}
    p {…}
  }
  .read-more {
    margin-top: auto;
    align-self: flex-end;
    text-align: right;
  }
}

你可以在这里看看：

Codepen：http://codepen.io/achoukah/pen/pgEVmq

我的网站：http://anwarchoukah.com/projects

Answer 1

不要在您的flex-direction: column上设置<ul> (您也不需要将它设置为flex-direction: row，因为这是默认的)。

将flex-wrap: wrap设置为<ul> --这很重要。

你也不需要flex: 0 0 100%在<li>上。

Codepen：https://codepen.io/anon/pen/QqOXWP