7
フレンドレイアウトを作成しましたが、4つの列/ボックスが親div内に並べてあります。私は980pxで列の幅を増やすフレックスラップを追加して2つの右手の列を新しい行にプッシュし、2 x 2スタイルのレイアウトを作成するメディアクエリを追加しました。これはSafariを除くすべてのブラウザで動作しますが、結果は予測できません。Safariで正しく積み重ねられないフレックスアイテム
フィドル：あなたはChromeでこれを表示して980px以下のウィンドウをドラッグした場合https://jsfiddle.net/gjy1t16p/6/
、それは私が前述しましたように動作します。しかしSafariでは、問題を正確に再現することはできませんでしたが、ボックスは代わりに垂直に積み重ねられます。
私が言及したように、結果は予測できません。私のウェブサイトに実装されたとき、レイアウトは実際に私が作ったフィドルよりも働きやすいです。ウェブサイトでは、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;
}
}
パーフェクト、。 – Jack1991