web-dev-qa-db-ja.com

Safariでflex-wrapが期待どおりに機能しない

http://www.shopifyexperte.de/ のホームページには、「Kundenstimmen」の下と「NeuesteBeiträge...」の下に1つずつ、2つのflex-boxモジュールがあります。内側のボックスは、220ピクセル未満になり、幅が30％を超えない場合にラップすることになっています。これは最新のChrome、FFおよびOpera（すべてMac）で機能しますが、Safari 8.0.5（Mac）およびiOSブラウザーでは、十分なスペースがあってもボックスが一列に並ぶことはありません。それらは常にラップされ、それぞれが独自の行になります。

コンテナのCSS：

.homepage-testimonial-container {
        display: flex;
        display: -webkit-flex;
        -webkit-flex: 1;
        flex: 1;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        margin-top: 1em;
}

コンテナ内のボックスのCSS：

.homepage-testimonial {
        margin-bottom: 1em;
        min-width: 220px;
        max-width: 30%;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
}

-webkit-flex-wrapを無効にすると（事実上nowrapに設定）、すべてのボックスが一列に並んでいますが、ブラウザーウィンドウが狭くなりすぎると、最終的にコンテナーがオーバーフローします。

これはSafari/Webkitの何らかのバグですか、ここで何か間違っていますか？

cssflexbox
48
Tom Borowski

これはSafariのバグのようです。別の問題で、-webkit-flex: 1 1 auto;のような何かを言う行でautoの代わりにmin-widthを使用してテストしました。

この質問にはいくつかの情報があります： https://stackoverflow.com/a/30792851/756329

33
Joseph Hansen

The most convenient and reliable file storage service

Receive your personal cloud storage with 2Gb of space for free

このような子要素を設定すると、私にとってはうまくいくようです

flex: 1 0 auto;
31
socrateisabot

Safari（9.1.3）でBootstrap 3グリッドシステム（たとえば、col-md-4）とflexの組み合わせで同様の問題が発生しました。 colアイテムにmargin: 0 -1px;を設定し、ラッパーにflex-wrap: wrap;を設定して解決しました。

21
eye-wonder

flex-basis: 20emの設定も機能しますが、min-width: 20emは機能しません。

8
sidstumple

Safari 11.0.1を使用していますが、バグは続きます。 display：flex要素のflexと組み合わせたBootstrap 3を使用します。列要素を対象とするために、cssに以下を追加しました。 Safariの幅のパーセンテージには、正しく反映されていないものがあるようです。

.row [class*=col-]{
    margin:0 -.3px;
}
7
D3XT3R

Flexible, reliable and affordable cloud hosting

Sign up and get $50 bonus within 30-day!

これは確かにSafariのバグです。詳細は、優れた flexbugs ページにありますが、引用してください：

Safariは、実際にflexアイテムのサイズをレンダリングするためにmin/max width/height宣言を使用しますが、複数行のflexコンテナの1行にあるアイテムの数を計算する際にそれらの値を無視します。代わりに、単にアイテムのフレックスベース値、またはフレックスベースが自動に設定されている場合はその幅を使用します。

したがって、ここでの他の回答で示唆されているように、修正/回避策は、flex-basisをautoではなく明示的な幅に設定することです。

4
Nick F

私はこの問題に再び遭遇し、「フレックスフロー」を使用しました。魅力のように働いた。

.row {
    @include flex();
    @include flex-wrap();
    flex-flow: row;
}
1
CS_student