Question

Flex容器有四个子容器，每个子容器的灵活度为25％，最小宽度。 flex-flow设置为row wrap。 Safari之外的浏览器按预期处理这个：如果达到最小宽度，它将下一个项目包装到下一行。在Safari中，它会溢出容器。

在此处查看演示： http://codepen.io/lbilharz/pen/aJbkI

JADE

h1 Why this ain't wrappin' in mobile-safari?
  .flex
    for i in ['one','two','three','four']
      .item
        h2=i

手写笔

.flex
  display flex
  flex-wrap wrap
  flex-direction row
  padding 1em
  background lightyellow
  .item
    flex 1 0 25%
    padding 1em
    box-sizing border-box
    min-width 15em

有什么想法吗？

Answer 1

根据comment on bugs.webkit.org，似乎解决方案很简单！

如果你的风格是

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1;
    flex: 1;
}

您只需要为flex声明添加更明确的内容即可。事实上，我认为只有一行需要像这样改变

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1 1 15em; /* this */
    flex: 1;
}

Answer 2

我在我的flex项目上使用max-width，因此我可以通过在max-width属性中明确设置flex来解决此问题：

.wrapper {
  display: flex;
  flex-flow: row wrap;
}
li {
  width: 100%;
  max-width: 500px;
  flex: 1 1 500px;
}

Answer 3

这是一个Safari IOS错误。因此，修复/解决方法是将flex-basis设置为显式宽度，而不是为子元素设置auto。

Answer 4

请注意，并非所有前缀都以相同的方式工作，因此每个前缀上都有已知问题，您需要手动添加一些供应商前缀。除非您检查前缀或自动软件在您的项目中是否可以百分百地工作，否则不要盲目信任它。

有关Flex漏洞的详细信息，请参阅：

https://caniuse.com/#feat=flexbox

https://github.com/philipwalton/flexbugs

如约瑟夫·汉森（Joseph Hansen）所指出的那样，在flex声明中包括width属性作为第三参数是flex的理想解决方法，它应该解决大多数由于将flex与某些声明合并而产生的问题。

但这不能解决Safari甚至其他浏览器上的所有问题；有时取决于孩子或其他财产；在下面的示例中，即使所有三个元素都应保持相同的宽度 ON SAFARI ，您也会看到中间框比平常增长更多。如果您使用的是chrome，它将看起来非常漂亮。

这不是flex问题，而是显示解释器。只需删除显示内容：内联表将解决safari的问题，但是，随着子元素的增加，所有卡的高度都会增加，因此我们需要解决由于切换到另一个显示属性而导致的其他行为。

.flexrow {
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0px -15px;
}
.card-container {
  display: inline-table;
}
div.card-container {
  -webkit-flex: 0 1 calc(33.3333% - 30px);
  flex: 0 1 calc(33.3333% - 30px);
  margin: 15px;
}
.card-container {
  background:green;
}

<div class="flexrow">
  <div class="card-container">
      <div class="card">
        <p class="title">
          test test test
        </p>
      </div>
    </div>

    <div class="card-container">
      <div class="card">
        <p class="title">
          test testtesttest test test test
        </p>
      </div>
    </div>

    <div class="card-container">
      <div class="card">
        <p class="title">
          test test
        </p>
      </div>
    </div>
</div>

这只是一个示例，但我建议检查每个具有flexbox边界的属性（即显示，位置等）。

这是工作示例：

.flexrow {
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0px -15px;
}
.card-container {
  // display: inline-table;
}
div.card-container {
  -webkit-flex: 0 1 calc(33.3333% - 30px);
  flex: 0 1 calc(33.3333% - 30px);
  margin: 15px;
}
.card-container {
  background:green;
}

<div class="flexrow">
  <div class="card-container">
      <div class="card">
        <p class="title">
          test test test
        </p>
      </div>
    </div>

    <div class="card-container">
      <div class="card">
        <p class="title">
          test testtesttest test test test
        </p>
      </div>
    </div>

    <div class="card-container">
      <div class="card">
        <p class="title">
          test test
        </p>
      </div>
    </div>
</div>

Answer 5

在您显示的项目中，根据您的要求尝试添加此 width: max-content; 或 width: min-content;。

Answer 6

某些浏览器并不完全支持所有CSS3元素。试试这个：

  display:-webkit-box;
  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-moz-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;

柔性框中的行换行不包装在Safari中

6 个答案: