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

Question

一个弹性容器有四个孩子,每个孩子的灵活度为25%,最小宽度.flex-flow设置为row wrap.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

有任何想法吗？

Answer 1

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

我正在使用max-width我的flex项目,所以我能够通过max-width在flex属性中明确设置来解决这个问题:

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

Answer 3

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

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