如何使用 CSS Grid 和 Flexbox 建立響應式方塊網格？

帶有Flexbox 的響應式正方形CSS 網格

透過理解關鍵原理並應用它們，可以使用CSS Grid 和Flexbox 創建響應式正方形網格

方法：

1. 利用Flexbox進行水平分佈： Flexbox 提供了水平分佈方塊的靈活性，同時保持其寬度。使用 flex 或 min-width 調整正方形的寬度。
2. 定義正方形長寬比：要確保元素是正方形，請加上長寬比： 1 / 1 到方塊的樣式。此屬性可確保寬度和高度保持恆定的 1:1 比例。
3. 將高度設定為自動：與寬度不同，高度方塊應設定為自動。這允許方塊垂直縮放而不扭曲其縱橫比。
4. 使用 Flexbox 調整高度大小：當方塊垂直縮放時，您可能會注意到間隙他們之間。要消除這些問題，請在父容器中添加align-items:stretch，確保正方形拉伸以填充可用的垂直空間。

程式碼實作：

這是包含這些原則的修訂後的程式碼範例：

 顯示：flex;<br> justify-content: space-around;<br>對齊內容：stretch;<br>}<br>.flex-item {<br>背景：番茄；<br>邊距：5px;<br>顏色：白色；<br>字體字體粗細：粗體；<br> 字體大小：1.5em；<br>文字對齊：居中；<br> 彈性：1 0 自動；<br> 縱橫比：1 / 1; <br> 高度：自動;<br>}<br>

 <div class="flex-item">1</div><br> <div> <div class="flex-item">3</div>
<br> <div> 5</div>
<br> <div> <div class="flex-item">7</div>
<br>
</div> <br>”</div>

以上是如何使用 CSS Grid 和 Flexbox 建立響應式方塊網格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！