web-dev-qa-db-ja.com

Safariで折り返さないフレックスボックスの行の折り返し

フレックスコンテナには4つの子があり、それぞれ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

何か案は？

csssafariflexbox
36
Lars Bilharz

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宣言に明示性を追加する必要があります。実際、そのように変更する必要があるのは1行だけだと思います

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;
}
52
Joseph Hansen

フレックスアイテムでmax-widthを使用しているので、flexプロパティ内でmax-widthを明示的に設定することでこれを解決できました。

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

これはSafari IOSバグです。したがって、修正/回避策は、子要素のautoではなく、明示的な幅にflex-basisを設定することです。

2
Prakash Upadhyay