掌握灵活的布局：响应式设计的 CSS Flexbox VS Grid

这篇文章探讨了使用 CSS Flexbox 和 Grid 创建响应式、水平分布的卡片列表的各种方法。 我们将解决在不同屏幕尺寸上保持一致的卡片尺寸和间距的挑战。

目录

• 目录
• 挑战
• CSS Flexbox：灵活的卡片列表
• 与 flex-grow 和 flex-basis
均匀发卡
• CSS 网格：响应式解决方案
• 总结

挑战

图库或列表组件通常需要卡片（文章、产品、图像）来适应容器的宽度。 每张卡片应按比例调整大小，保持相同的高度、宽度和间距。 布局应在各种屏幕尺寸上无缝重排。

基本的 HTML 结构和最少的 CSS 最初可能会产生不均匀的卡片分布：

CSS Flexbox：灵活的卡片列表

Flexbox 提供了一种简单的方法。 flex-wrap: wrap 允许换行到新行，gap 控制间距：

<code class="language-css">.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}</code>

这会产生水平流：

但是，为 .item (width: 100px;) 设置固定宽度可防止卡片扩展以填充可用空间，从而留下间隙：

使用 justify-content 属性（如 space-between、space-around 等）并不能完美解决均匀分布问题：

与 flex-grow 和 flex-basis

均匀发卡

flex-basis 设置初始卡片大小，而 flex-grow: 1（或 flex: 1）允许按比例增长：

<code class="language-css">.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}</code>

这改善了分布，但最后一张卡片可能仍会不均匀地扩展：

CSS 网格：响应式解决方案

CSS Grid 提供了更强大的解决方案。 display: grid 和 gap 的使用方式与 Flexbox 类似：

<code class="language-css">.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}</code>

对于响应能力，grid-template-columns 与 auto-fit、minmax() 和 repeat() 是关键：

<code class="language-css">.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}</code>

这将创建一个完全响应式布局：

总结

Flexbox 和 Grid 都提供强大的布局功能。 Flexbox 擅长一维布局，而 Grid 则擅长二维控制。 选择合适的工具取决于具体的设计要求。

编码愉快！ ？

？ 通过我的新书《学习 Vue》了解 Vue 3 和 TypeScript！

？ 在 X 上与我联系 |领英。

喜欢这篇文章吗？分享吧！ ?? ？

以上是掌握灵活的布局：响应式设计的 CSS Flexbox VS Grid的详细内容。更多信息请关注PHP中文网其他相关文章！