精通高级 CSS Grid 与 Flexbox 技巧，实现响应式布局

Source: Dev.to

为什么要结合 CSS Grid 和 Flexbox？

• CSS Grid 在二维布局（行列同时）方面表现出色，适用于复杂的页面结构。
• Flexbox 在一维布局（行或列）方面表现卓越，适合在容器内对元素进行对齐、分配和排序。

将它们结合使用可以让您以精确且轻松的方式构建可复用、可适配的组件。

1. 高级 CSS Grid 技巧

a. 命名网格线和区域

与仅依赖隐式编号不同，使用命名网格线和区域可以提升可读性和可维护性：

.grid-container {
  display: grid;
  grid-template-columns: [start] 1fr [content-start] 3fr [content-end] 1fr [end];
  grid-template-rows: [header-start] 80px [header-end main-start] auto [main-end footer-start] 60px [footer-end];
  grid-template-areas:
    "header header header"
    ". content ."
    "footer footer footer";
}

.header { grid-area: header; }
.content { grid-area: content; }
.footer { grid-area: footer; }

b. 隐式网格和自动放置

利用 grid-auto-flow 的自动放置功能，让项目动态填充可用空间，特别适用于砖石布局或列表布局：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 120px;
  grid-auto-flow: dense;
}

c. 子网格（面向未来）

subgrid 允许嵌套网格继承父网格的轨道，非常适合在网格项内部一致地对齐内容（目前在 Firefox 以及部分浏览器中受支持）：

.parent-grid {
  display: grid;
  grid-template-columns: 1.0fr 2.0fr;
}

.child-grid {
  display: subgrid;
  grid-template-columns: subgrid;
}

2. 高级 Flexbox 技巧

a. 视觉上控制项目顺序

使用 order 属性在不更改 DOM 的情况下重新排列 flex 项目，适用于响应式布局的重新排列：

.item-1 { order: 2; }
.item-2 { order: 1; }

记住：数值越小的项目越靠前显示。

b. Flexbox 实现垂直居中和空间分配

结合 align-items、justify-content 和外边距实现居中和间距：

.flex-container {
  display: flex;
  align-items: center;            /* 垂直居中 */
  justify-content: space-between;/* 水平间距 */
}

在 flex 容器内部使用 margin-left: auto; 可将项目推到右端。

c. 换行与 Flex Basis 实现响应式分配

使用 flex-wrap 配合弹性基准创建能够优雅换行的自适应布局：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 1 300px;  /* 放大、收缩、基准 */
  margin: 10px;
}

3. 组合 Grid 与 Flexbox

许多复杂布局受益于两者的混合使用：

• 在主页面结构中使用 Grid。
• 在组件内部使用 Flexbox，以细致控制内容的对齐和分布。

示例： 使用 Flexbox 的灵活页眉导航栏的网格布局。

使用 Grid 和 Flexbox 的响应式设计

利用媒体查询以及 Grid 和 Flexbox 的特性，如 minmax()、auto-fill 和 flex-wrap，构建能够在不同屏幕尺寸间无缝适配的布局。

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
  .flex-container {
    flex-direction: column;
  }
}

5. 可访问性考虑

在使用 CSS 操作顺序和布局时：

• 避免大幅更改逻辑 Tab 顺序，因为这可能会让键盘用户感到困惑。
• 使用语义化的 HTML 和 ARIA 角色，以确保屏幕阅读器能够正确解释内容。

最后提示

• 使用浏览器 DevTools 的 Grid 和 Flexbox 覆盖层，在构建时可视化你的布局。
• 利用 CSS 自定义属性实现可伸缩的布局间距和尺寸。
• 尝试使用诸如 Flexbox 中的 gap 等新属性，它们现在已得到广泛支持。
• 保持标记语义化且简洁，让 CSS 负责视觉重排。

最后思考

掌握高级 CSS Grid 和 Flexbox 技巧能够让你对网页布局拥有无与伦比的控制力。这些工具使你能够创建响应式、可维护且视觉丰富的设计，满足任何设备或屏幕上的用户需求。

投入时间去探索网格线命名、隐式流、排序技巧以及响应式包装器。你的布局不仅会变得更优雅，还会更加稳健。

查看 YouTube 播放列表 以获取从基础到高级主题的精彩 CSS 内容。