調整大小時如何彈性包裝這些子元素

Question

我需要在較小的設備上包裝子元素，但即使我設置了 flex-wrap，它們也不會移動到下一行。 如何在調整大小時將它們移動到下一行並在移動設備上一一堆疊。 請看代碼筆。 https://codepen.io/Nickbing/pen/KKKdyVm

 .container { padding: 5rem; width: 1200px; display: flex; align-items: center; justify-content: center; }.content { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; }.child { text-align: center; background-color: grey; flex: 1; margin-right: 2rem; }

 <div class="container"> <div class="content"> <div class="child"> <h1>1</h1> </div> <div class="child"> <h1>2</h1> </div> <div class="child"> <h1>3</h1> </div> <div class="child"> <h1>4</h1> </div> </div> </div>

Answer 1

您的主要 flex 容器 ( .container ) 具有 1200 像素的固定寬度。

設置為 wrap 的嵌套 flex 容器 ( .content ) 的寬度為 100%。

因為主容器是不靈活的（它永遠不會收縮），嵌套容器也永遠不會收縮（它總是 1200px 的 100%），並且項目永遠不會被擠壓到下一行。

給主容器一個靈活的寬度，給嵌套容器的項目一個最小寬度，然后它們將被強制換行。

 .container { padding: 5rem; /* width: 1200px; */ display: flex; align-items: center; justify-content: center; }.content { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; }.child { text-align: center; background-color: grey; flex: 1 0 100px; /* adjustment */ margin-right: 2rem; }

 <div class="container"> <div class="content"> <div class="child"> <h1>1</h1> </div> <div class="child"> <h1>2</h1> </div> <div class="child"> <h1>3</h1> </div> <div class="child"> <h1>4</h1> </div> </div> </div>

jsFiddle 演示

Answer 2

首先，不要將container的寬度設置為某個值。 它始終設置該值的寬度，並且永遠不會縮小到該值以下。 改為這樣做：

body {
   width: 100vw;
} 

.container {
   padding: 5rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

然后使用移動media queries ：

@media screen and (max-width: 799px) {
    .content {
       flex-direction: column; 
    }

    .child {
       margin-bottom: 1rem;
    }
 }