使用 CSS flexbox 時，如何使父 div 在其子包裝之前包裝？

Question

我有一個有兩個主要孩子的父 div。 每一個里面都有幾個元素。 我需要它們在沒有足夠空間時響應並包裝。

CSS 看起來像這樣：

.parent {
   display: flex,
   justify-content: center,
   flex-direction: row,
   flex-wrap: wrap
}

.children {
   display: flex,
   justify-content: center,
   flex-direction: row,
   flex-wrap: wrap
}

我希望父 div 包裝，然后當仍然沒有足夠的空間時孩子包裝。 當前的行為是相反的，當沒有足夠的空間時，孩子會換行，然后父方會換行。

請參閱鏈接的圖片以獲取視覺表示。

這可以實現嗎？ 你能以某種方式選擇第一個包裹的水平嗎？

視覺表現

Answer 1

為父元素使用顯示網格

不要使用彈性包裝

檢查下面的例子

 .container { margin-left: auto; margin-right: auto; padding: 0 15px; height: 100vh; background-color: #f2f2f2; }.parent { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }.left, .right { display: flex; align-items: center; justify-content: center; gap: 10px; background-color: yellow; padding: 15px; }.box { width: 40px; height: 40px; background-color: red; padding: 15px; } @media(max-width: 400px) {.left, .right { flex-direction: column; } }

 <div class="container"> <div class="parent"> <div class="left"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="right"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> </div>

Answer 2

我在下面有一個工作示例：

例如，我將最小寬度設置為 100px。

 .parent, .child { display: flex; justify-content: center; flex-wrap: wrap; }.parent { gap: 2rem; }.child { flex-grow: 1; gap: 1rem; }.box { flex-grow: 1; flex-shrink: 1; min-width: 100px; aspect-ratio: 1 / 1; }

Answer 3

您可以使用 JavaScript 執行此操作。使用 window.innerWidth 和 window.innerHeight 獲取顯示的尺寸，然后添加或刪除 class

//js 
var width=window.innerwidth;
if(width<1080)//According to your requirement
document.querySelector(".child").classList.add("rspclass");

將內聯添加到您的顯示內部 child class

.rspclass{ 
display: flex,
   justify-content: center,
   flex-direction: row,
   flex-wrap: wrap
}

.child{
display:inline;
}