ios - iOS 8 上的 Flexbox - 框折叠

Question

使用媒体查询，在 iPad 上，flex-direction: row 横向看起来不错。一旦我转向纵向(flex-direction: column)，一切都变得奇怪和崩溃。

我使用 Codekit 编译我的 SCSS，并运行 Autoprefixer。

这是我的代码:

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;
  }
}

你可以在这里看看:

代码笔: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 fork :https://codepen.io/anon/pen/QqOXWP