iOS 8 上的 Flexbox - 盒子折叠答案

【问题标题】：Flexbox on iOS 8 - boxes collapseiOS 8 上的 Flexbox - 盒子折叠
【发布时间】：2016-03-31 23:28:56
【问题描述】：

使用媒体查询，在 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;
  }
}

你可以在这里看看：

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

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

【问题讨论】：

并不是我自己的问题的真正答案，但是通过在任何地方设置flex-direction: row，可以避免崩溃，但是如果它的子项设置为flex: 0 0 100%，它只会显示为一列。所以：问题似乎是flex-direction: column的问题
“修复”链接：codepen.io/achoukah/pen/WrGJdM

标签： ios css media-queries flexbox

【解决方案1】：

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

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

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

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

【讨论】：