如何使用 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"></div>

”

登录后复制