首页 文章

Flex包装中的行换行不包装在Safari中

提问于
浏览 次
34

一个弹性容器有四个孩子，每个孩子的灵活度为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

有任何想法吗？

css safari flexbox

4 回答

  • -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;
}
    回复于
  • 2

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

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

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

    回复于
  • 49

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

    display:-webkit-box;
  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-moz-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
    回复于

相关问题