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

不要在 <ul> 上设置 flex-direction: column（您也不需要将其设置为 flex-direction: row，因为这是默认设置）。

在 <ul> 上保留 flex-wrap: wrap 设置 - 这很重要。

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

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

iOS 8 上的 Flexbox - 框折叠

Flexbox on iOS 8 - boxes collapse

css

ios

media-queries

flexbox