flex-box 中的行换行未在 Safari 中换行

Posted 2023-03-06

【中文标题】flex-box 中的行换行未在 Safari 中换行

【英文标题】：Row Wrap in flex-box not wrapping in Safari

【发布时间】：2014-10-11 04:51:30

【问题描述】：

一个 flex 容器有四个孩子，每个孩子的 flex-basis 为 25% 和一个最小宽度。 flex-flow 设置为换行。 Safari 以外的浏览器按预期处理此问题：如果达到最小宽度，它将下一个项目包装到下一行。在 Safari 中它会溢出容器。

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

玉

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

有什么想法吗？

【问题讨论】：

好像是Webkit-Bug，见bugs.webkit.org/show_bug.cgi?id=136041

找到解决方法了吗？

【参考方案1】：

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

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

【讨论】：

感谢您的回复，但是如果您看一下codepen，您会看到供应商前缀是自动添加的。

【参考方案2】：

根据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;
 

【讨论】：

感谢您的评论，它帮助我进一步了解了 flex-basis。你也可以省略 min-width 并写成-webkit-flex: 1 0 15em; flex: 1 0 15em;。

【参考方案3】：

我在我的弹性项目上使用了max-width，所以我可以通过在flex 属性中显式设置max-width 来解决这个问题：

.wrapper 
  display: flex;
  flex-flow: row wrap;

li 
  width: 100%;
  max-width: 500px;
  flex: 1 1 500px;

【参考方案4】：

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

【参考方案5】：

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

详细的flex bug请参考：

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

https://github.com/philipwalton/flexbugs

正如 Joseph Hansen 所指出的，在 flex 声明中包含 width 属性作为第三个参数是 flex 的理想解决方法，它应该可以解决将 flex 与某些声明合并所产生的大部分问题。

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

这不是弹性问题，而是显示解释器问题。简单地删除 display: inline-table 将解决 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>

【参考方案6】：

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