如何在css中制作動態四列布局

Question

我想獲取數據（標題、數字和日期）並將它們放入一個框（綠色框）中，然后將這些框放在我網站的一行中，如下所示：截圖

每行可以有 4 個項目，但因為盒子的數量是動態的，所以一行只能有兩個盒子。

即使只有 2 個盒子，我也希望盒子之間有一個均勻的空間。我不能使用 { justify-content:space-between } 因為在這種情況下我有兩個盒子，一個放在頁面的右側另一個貼在左側，我不能使用 {margin-right} 或 {margin-left} 因為如果我有 4 個盒子，我希望盒子貼在側面，就像我使用 { justify-content:space-between }

如果你能幫我解決這個問題，我會很高興

PS：我在reactjs中編碼

Answer 1

通過使用display:flex; 和flex-wrap:wrap; 對於 Container 並為其添加padding ，您可以實現您的目標：

 .container{ width:1000px; display:flex; padding:10px; } .box{ width:200px; flex-wrap:wrap; height:200px; background-color:red; margin:20px; }

 <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div>

Answer 2

您可以使用display: grid來實現屏幕截圖中的內容。 這帶來了額外的好處，即能夠設置相對於彼此的列的大小：

 .boxcontainer{ display: grid; /* Use grid type layout to get columns */ grid-template-columns: 1fr 1fr 1fr 1fr; /* Proportions of the columns */ gap: 20px; /* Use gap here instead of margin in .box */ } .box{ width: 100%; /* Use 100% of each column */ height: 200px; /* This can be whatever you want */ background-color: red; }

 <div class="boxcontainer"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div>