前端技术分享
0%

Flex布局和Grid布局

发表于 分类于

在 CSS 布局中，Flexbox（弹性盒布局）和 Grid（网格布局）是两大核心工具。它们解决了传统布局方式（浮动、定位、表格）的诸多痛点，让开发者能够更高效、更灵活地构建页面结构

Flex 布局（一维布局）

Flexbox 是一种一维布局模型，它专注于在一个方向（水平或垂直）上排列元素。你可以控制元素在主轴上的对齐、分布以及换行行为。

Flex 容器属性

在父元素上设置 display: flex 或 display: inline-flex 即可创建 Flex 容器。

  • flex-direction：定义主轴方向。
    – row（默认）：水平从左到右
    – row-reverse：水平从右到左
    – column：垂直从上到下
    – column-reverse：垂直从下到上
  • flex-wrap：控制是否换行。
    – nowrap（默认）：不换行，可能溢出
    – wrap：换行，第一行在上方
    – wrap-reverse：换行，第一行在下方
  • justify-content：主轴对齐方式。
    – flex-start（默认）：起始对齐
    – flex-end：末尾对齐
    – center：居中对齐
    – space-between：两端对齐，项目之间间距相等
    – space-around：每个项目两侧间距相等
    – space-evenly：项目之间和两端间距相等
  • align-items：交叉轴对齐方式（单行）。
    – stretch（默认）：拉伸填满
    – flex-start：交叉轴起始对齐
    – flex-end：交叉轴末尾对齐
    – center：交叉轴居中对齐
    – baseline：基线对齐
  • align-content：多行情况下交叉轴对齐方式（类似 justify-content，但作用于交叉轴）。

Flex 项目属性

  • flex-grow：定义项目的放大比例，默认为 0（不放大）。
  • flex-shrink：定义项目的缩小比例，默认为 1（空间不足时缩小）。
  • flex-basis：定义在分配多余空间之前项目占据的主轴空间，默认 auto（即项目本来的大小）。
  • flex 是 flex-grow、flex-shrink、flex-basis 的简写，例如 flex: 1 等价于 1 1 0%。
  • align-self：允许单个项目覆盖容器的 align-items 设置。
  • order：定义项目的排列顺序，数值越小越靠前，默认为 0。

Flex 示例：导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li>首页</li>
    <li>产品</li>
    <li>关于</li>
    <li>联系</li>
  </ul>
  <div class="user">登录</div>
</nav>

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #333;
  color: #fff;
  padding: 1rem;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: 1.5rem;
}

Grid 布局（二维布局）

Grid 是一种二维布局模型，它可以同时处理行和列，非常适合构建复杂的页面结构。

Grid 容器属性

在父元素上设置 display: grid 或 display: inline-grid 即可创建 Grid 容器。

  • grid-template-rows / grid-template-columns：定义行和列的轨道大小。
    – 可以使用固定长度、百分比、fr 单位（剩余空间分配）、auto、minmax()、repeat() 等。
1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 三列，比例 1:2:1 */
  grid-template-rows: 100px auto 200px;
}
  • gap：行列之间的间距（简写 row-gap 和 column-gap）。
  • justify-items / align-items：控制单元格内容在单元格内的水平/垂直对齐方式（start、end、center、stretch）。
  • justify-content / align-content：控制整个网格在容器内的对齐方式（当网格总大小小于容器时）。
  • grid-template-areas：通过命名区域来定义布局，非常直观。
1
2
3
4
5
6
7
8
9
10
11
12
.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 2fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Grid 项目属性

  • grid-column / grid-row：指定项目占据的列/行范围。例如 grid-column: 1 / 3 表示从第 1 列线到第 3 列线（跨越 2 列）。也可以使用 span 关键字，如 grid-column: span 2。
  • grid-area：如果定义了 grid-template-areas，直接指定区域名；否则可以作为 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的简写。
  • justify-self / align-self：单个项目的对齐方式，覆盖容器的 justify-items / align-items。

Grid 示例：卡片网格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="grid-container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
  <div class="card">卡片5</div>
  <div class="card">卡片6</div>
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}
.card {
  background: #f4f4f4;
  padding: 1rem;
  border-radius: 4px;
  text-align: center;
}

Flex 与 Grid 的区别

维度 Flexbox Grid
布局维度 一维（行或列） 二维（同时控制行和列）
设计思想 内容驱动（项目大小影响布局） 布局驱动（先定义网格，再放置项目）
适用场景 组件内部排列、导航栏、小规模布局 整体页面架构、复杂二维布局
对齐能力 强大的主轴/交叉轴对齐 同样强大，且支持单元格内对齐
重叠控制 无法控制项目重叠（除非定位） 可以轻松让项目占据相同单元格实现重叠
响应式 通过 flex-wrap 和 flex 属性适应 通过 repeat(auto-fit, minmax()) 轻松实现

Flex 与 Grid 的结合使用

在实际项目中，Grid 和 Flex 并非互斥，而是相辅相成。通常可以用 Grid 搭建页面的宏观框架（如头部、侧边栏、主要内容区、底部），然后在每个区域内用 Flex 处理内部元素的排列。

示例：Grid 宏观布局 + Flex 内部微调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="page">
  <header class="header">
    <div class="logo">Logo</div>
    <nav class="nav">导航链接...</nav>
  </header>
  <aside class="sidebar">侧边栏</aside>
  <main class="main">主要内容</main>
  <footer class="footer">页脚</footer>
</div>

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.header {
  grid-area: header;
  display: flex;            /* 内部使用 Flex */
  justify-content: space-between;
  align-items: center;
  background: #333;
  color: #fff;
  padding: 1rem;
}
.sidebar { grid-area: sidebar; background: #f0f0f0; }
.main { grid-area: main; padding: 1rem; }
.footer { grid-area: footer; background: #333; color: #fff; text-align: center; padding: 1rem; }

总结

  1. Flexbox 擅长处理一维排列，适合小范围的组件布局，例如导航栏、列表、卡片内的元素分布。
  2. Grid 擅长处理二维布局，适合构建整个页面的骨架，例如整体布局、网格相册、仪表盘。
  3. 两者可以无缝结合，用 Grid 做宏观布局，用 Flex 做微观调整，让代码既清晰又灵活。
  4. 掌握 Flex 和 Grid 是现代 CSS 布局的必修课，它们让响应式设计变得更加简单和可控。