行包装在弹出框不包装在Safari [英] Row Wrap in flex-box not wrapping in Safari

问题描述

flex容器有四个孩子，每个孩子的弹性基数为25％和最小宽度。 flex-flow设置为行换行。除Safari以外的其他浏览器会按预期处理此操作：如果达到最小宽度，则将下一个项目包装到下一行。在Safari中，它溢出了容器。

A flex container has four children, each with a flex-basis of 25% an a min-width. flex-flow is set to row wrap. Browsers other then Safari handle this as expected: if the min-width is reached, it wraps the the next item to the next row. In Safari it overflow the container.

请参见demo：
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

任何想法？

推荐答案

每个关于bugs.webkit.org的评论，看来解决方案很简单！

Per a comment on bugs.webkit.org, it seems the solution is simple!

如果你的风格是

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 声明。事实上，我认为只有一行需要改变，所以

you just need to add more explicitness to your flex declaration. In fact, I think only one line needs to change like so

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

这篇关于行包装在弹出框不包装在Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！