web-dev-qa-db-ja.com

SafariでFlexアイテムが適切にスタックしない

親div内に4つの列/ボックスが並んで配置されるフレックスレイアウトを作成しました。列の幅を広げるメディアクエリを980pxに追加し、2つの右側の列を新しい行にプッシュするフレックスラップを追加して、2 x 2スタイルのレイアウトを作成します。これは、結果が非​​常に予測できないSafariを除くすべてのブラウザーで機能します。

フィドル： https://jsfiddle.net/gjy1t16p/6/

これをChrome=で表示し、ウィンドウを980px未満にドラッグすると、上で説明したように動作します。ただし、Safariでは、問題を正確に再現することができませんでしたが、ボックスは代わりに垂直に積み重ねられます。

先ほど触れたように、結果は予測できません。私のWebサイトに実装した場合、レイアウトは実際にはFiddleで作成したものよりも機能します。Webサイトでは、2 x 2のレイアウトが機能します。 、ただし4番目のボックス内にテキスト/ウィジェットがない場合のみ。ボックスの全幅に達するコンテンツが含まれると、左に移動して3番目のボックスの下に配置されます。その後。

誰かがこのバグを以前に経験し、それを解決する方法を知っているなら、私は本当に感謝します。私はそれを修正するために一日中費やしてきました、そして私は完全にアイデアの外にいます。

HTML：

<footer class="footer">

<div class="footer-container">

<div class="footer-column" id="column-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

<div class="footer-column" id="column-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

<div class="footer-column" id="column-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

<div class="footer-column" id="column-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

</div>

</footer>

CSS：

.footer {  
    height: auto;
    width: 100%;        
    background-color: #efefef;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
        display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
        flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
        align-items: center;
}

.footer-container {
    width:85%;
    height:inherit;
    margin-top:60px;
    overflow:hidden;
    display:-webkit-box;        
    display:-webkit-flex;       
    display:-ms-flexbox;        
        display:flex;       
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
        justify-content: space-between;
}

.footer-column { 
    min-width:20%;
    max-width:20%;
    margin-bottom:40px;
}

#column-1 {background-color:red}
#column-2 {background-color:yellow}
#column-3 {background-color:blue}
#column-4 {background-color:green}

@media only screen 
and (min-width : 0px) 
and (max-width : 980px) {

.footer-container {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;   
    -webkit-box-direction: normal;   
    -webkit-flex-direction: row;   
    -ms-flex-direction: row;   
        flex-direction: row;

}

.footer-column {
    margin-bottom:50px;
    min-width:45% !important;
    max-width:45% !important;
}

}
htmlcsssafariflexbox
10
Jack1991

持っているmin-widthおよびmax-width宣言を、同等のflexに置き換えてみてください。

これの代わりに：

.footer-column { 
    min-width: 20%;
    max-width: 20%;
    margin-bottom: 40px;
}

.footer-column {
    min-width: 45% !important;
    max-width: 45% !important;
    margin-bottom: 50px;
}

これを試して：

.footer-column { 
    flex: 0 0 20%;
    margin-bottom: 40px;
}

.footer-column {
    flex: 0 0 45%;
    margin-bottom: 50px;
}

改訂されたデモ

11
Michael_B