🎨 CSS Flexbox & Grid 布局完全指南#

目录#

CSS Flexbox 弹性盒子布局
CSS Grid 弹性网格布局

📋 概述#

CSS布局技术从传统的float和position发展到现代的Flexbox和Grid，为开发者提供了强大而灵活的布局解决方案。本文将深入探讨这两种现代布局技术，帮助你掌握构建复杂布局的核心技能。

🔧 Flexbox 弹性盒子布局#

什么是Flexbox？#

Flexbox（弹性盒子）是CSS3引入的一维布局方法，用于在容器中排列项目，即使在不知道项目大小或项目大小可变的情况下也能有效工作。

🎯 Flexbox 核心概念#

1
/* Flex 容器 */
2
.flex-container {
3
  display: flex;
4
  /* 或 display: inline-flex; */
5
}
6

7
/* Flex 项目 */
8
.flex-item {
9
  flex: 1; /* 简写属性 */
10
}

主要术语#

Flex Container（弹性容器） - 设置了display: flex的父元素
Flex Items（弹性项目） - 弹性容器的直接子元素
Main Axis（主轴） - 弹性容器的主要方向
Cross Axis（交叉轴） - 垂直于主轴的方向

🎪 Flex Container 属性#

1. flex-direction - 主轴方向#

1
.container {
2
  display: flex;
3

4
  /* 主轴方向 */
5
  flex-direction: row;        /* 默认：水平从左到右 */
6
  flex-direction: row-reverse; /* 水平从右到左 */
7
  flex-direction: column;      /* 垂直从上到下 */
8
  flex-direction: column-reverse; /* 垂直从下到上 */
9
}

2. flex-wrap - 换行控制#

1
.container {
2
  flex-wrap: nowrap;  /* 默认：不换行 */
3
  flex-wrap: wrap;    /* 换行 */
4
  flex-wrap: wrap-reverse; /* 反向换行 */
5

6
  /* 简写 */
7
  flex-flow: row wrap; /* flex-direction + flex-wrap */
8
}

3. justify-content - 主轴对齐#

1
.container {
2
  justify-content: flex-start;    /* 默认：起始对齐 */
3
  justify-content: flex-end;      /* 末尾对齐 */
4
  justify-content: center;        /* 居中对齐 */
5
  justify-content: space-between; /* 两端对齐 */
6
  justify-content: space-around;  /* 环绕对齐 */
7
  justify-content: space-evenly;  /* 均匀对齐 */
8
}

4. align-items - 交叉轴对齐#

1
.container {
2
  align-items: stretch;    /* 默认：拉伸填充 */
3
  align-items: flex-start; /* 起始对齐 */
4
  align-items: flex-end;   /* 末尾对齐 */
5
  align-items: center;     /* 居中对齐 */
6
  align-items: baseline;   /* 基线对齐 */
7
}

5. align-content - 多行对齐#

1
.container {
2
  align-content: stretch;       /* 默认：拉伸 */
3
  align-content: flex-start;    /* 起始对齐 */
4
  align-content: flex-end;      /* 末尾对齐 */
5
  align-content: center;        /* 居中对齐 */
6
  align-content: space-between; /* 两端对齐 */
7
  align-content: space-around;  /* 环绕对齐 */
8
}

🎭 Flex Item 属性#

1. flex-grow - 伸展比例#

1
.item {
2
  flex-grow: 0; /* 默认：不伸展 */
3
  flex-grow: 1; /* 可伸展，占据剩余空间 */
4
  flex-grow: 2; /* 伸展比例为其他项目的2倍 */
5
}

2. flex-shrink - 收缩比例#

1
.item {
2
  flex-shrink: 1; /* 默认：可收缩 */
3
  flex-shrink: 0; /* 不收缩 */
4
  flex-shrink: 2; /* 收缩比例为其他项目的2倍 */
5
}

3. flex-basis - 基础尺寸#

1
.item {
2
  flex-basis: auto;  /* 默认：基于内容 */
3
  flex-basis: 200px; /* 固定基础宽度 */
4
  flex-basis: 20%;   /* 百分比基础宽度 */
5
  flex-basis: 0;     /* 不考虑内容尺寸 */
6
}

4. flex - 简写属性#

1
/* 简写属性 */
2
/* flex : flex-grow | flex-shrink | flex-basis; */
3
.item {
4
  flex: 1;          /* flex: 1 1 0% */
5
  flex: 0 1 auto;   /* 默认值 */
6
  flex: 2;          /* flex: 2 1 0% */
7
  flex: 200px;      /* flex: 1 1 200px */
8
  flex: none;       /* flex: 0 0 auto */
9
}

5. align-self - 单独对齐#

1
.item {
2
  align-self: auto;       /* 默认：继承容器设置 */
3
  align-self: flex-start; /* 起始对齐 */
4
  align-self: flex-end;   /* 末尾对齐 */
5
  align-self: center;     /* 居中对齐 */
6
  align-self: stretch;    /* 拉伸对齐 */
7
  align-self: baseline;   /* 基线对齐 */
8
}

🌟 Flexbox 实用案例#

1. 水平垂直居中#

1
<div class="center-container">
2
  <div class="center-item">居中内容</div>
3
</div>

1
.center-container {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
  height: 100vh;
6
}
7

8
.center-item {
9
  padding: 20px;
10
  background: #3498db;
11
  color: white;
12
  border-radius: 8px;
13
}

2. 导航栏布局#

1
<nav class="navbar">
2
  <div class="logo">Logo</div>
3
  <ul class="nav-menu">
4
    <li><a href="#">首页</a></li>
5
    <li><a href="#">产品</a></li>
6
    <li><a href="#">关于</a></li>
7
  </ul>
8
  <div class="nav-actions">
9
    <button>登录</button>
10
  </div>
11
</nav>

1
.navbar {
2
  display: flex;
3
  justify-content: space-between;
4
  align-items: center;
5
  padding: 0 20px;
6
  background: #fff;
7
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
8
}
9

10
.nav-menu {
11
  display: flex;
12
  list-style: none;
13
  margin: 0;
14
  padding: 0;
15
  gap: 20px;
16
}
17

18
.nav-menu li a {
19
  text-decoration: none;
20
  color: #333;
21
  font-weight: 500;
22
}

3. 卡片布局#

1
<div class="card-container">
2
  <div class="card">卡片1</div>
3
  <div class="card">卡片2</div>
4
  <div class="card">卡片3</div>
5
</div>

1
.card-container {
2
  display: flex;
3
  gap: 20px;
4
  flex-wrap: wrap;
5
}
6

7
.card {
8
  flex: 1;
9
  min-width: 250px;
10
  padding: 20px;
11
  background: #f8f9fa;
12
  border-radius: 8px;
13
  border: 1px solid #e9ecef;
14
}

🏗️ CSS Grid 网格布局#

什么是Grid？#

CSS Grid是CSS3中最强大的布局系统，它是二维布局方法，能同时处理行和列，使复杂布局变得简单直观。

🎯 Grid 核心概念#

1
/* Grid 容器 */
2
.grid-container {
3
  display: grid;
4
  /* 或 display: inline-grid; */
5
}
6

7
/* Grid 项目 */
8
.grid-item {
9
  grid-column: 1 / 3; /* 跨列 */
10
  grid-row: 1 / 2;    /* 跨行 */
11
}

主要术语#

Grid Container（网格容器） - 设置了display: grid的父元素
Grid Items（网格项目） - 网格容器的直接子元素
Grid Line（网格线） - 组成网格结构的分界线
Grid Track（网格轨道） - 两条相邻网格线之间的空间
Grid Cell（网格单元） - 四条网格线围成的区域
Grid Area（网格区域） - 四条网格线围成的矩形区域

🎪 Grid Container 属性#

1. grid-template-columns/rows - 定义网格#

1
.container {
2
  display: grid;
3

4
  /* 固定尺寸 */
5
  grid-template-columns: 200px 200px 200px;
6
  grid-template-rows: 100px 100px;
7

8
  /* fr单位（分数单位） */
9
  grid-template-columns: 1fr 2fr 1fr;
10

11
  /* repeat()函数 */
12
  grid-template-columns: repeat(3, 1fr);
13
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
14

15
  /* 混合单位 */
16
  grid-template-columns: 200px 1fr 100px;
17

18
  /* 命名网格线 */
19
  grid-template-columns: [start] 250px [content-start] 1fr [content-end] 250px [end];
20
}

2. grid-template-areas - 网格区域#

1
.container {
2
  display: grid;
3
  grid-template-columns: 1fr 3fr 1fr;
4
  grid-template-rows: 60px 1fr 60px;
5
  grid-template-areas:
6
    "header header header"
7
    "sidebar main aside"
8
    "footer footer footer";
9
}
10

11
.header { grid-area: header; }
12
.sidebar { grid-area: sidebar; }
13
.main { grid-area: main; }
14
.aside { grid-area: aside; }
15
.footer { grid-area: footer; }

3. gap - 网格间距#

1
.container {
2
  display: grid;
3

4
  /* 统一间距 */
5
  gap: 20px;
6

7
  /* 分别设置行列间距 */
8
  row-gap: 20px;
9
  column-gap: 30px;
10

11
  /* 简写 */
12
  gap: 20px 30px; /* row-gap column-gap */
13
}

4. justify-items/align-items - 项目对齐#

1
.container {
2
  /* 水平对齐 */
3
  justify-items: start;   /* 起始对齐 */
4
  justify-items: end;     /* 末尾对齐 */
5
  justify-items: center;  /* 居中对齐 */
6
  justify-items: stretch; /* 默认：拉伸填充 */
7

8
  /* 垂直对齐 */
9
  align-items: start;
10
  align-items: end;
11
  align-items: center;
12
  align-items: stretch; /* 默认 */
13

14
  /* 简写 */
15
  place-items: center; /* align-items justify-items */
16
}

5. justify-content/align-content - 容器对齐#

1
.container {
2
  /* 水平分布 */
3
  justify-content: start;
4
  justify-content: end;
5
  justify-content: center;
6
  justify-content: space-between;
7
  justify-content: space-around;
8
  justify-content: space-evenly;
9

10
  /* 垂直分布 */
11
  align-content: start;
12
  align-content: end;
13
  align-content: center;
14
  align-content: space-between;
15
  align-content: space-around;
16
  align-content: space-evenly;
17

18
  /* 简写 */
19
  place-content: center; /* align-content justify-content */
20
}

🎭 Grid Item 属性#

1. grid-column/row - 位置定位#

1
.item {
2
  /* 列定位 */
3
  grid-column-start: 1;
4
  grid-column-end: 3;
5
  grid-column: 1 / 3;     /* 简写 */
6
  grid-column: 1 / span 2; /* 跨越2列 */
7

8
  /* 行定位 */
9
  grid-row-start: 1;
10
  grid-row-end: 2;
11
  grid-row: 1 / 2;        /* 简写 */
12
  grid-row: 1 / span 1;   /* 跨越1行 */
13

14
  /* 使用命名网格线 */
15
  grid-column: content-start / content-end;
16
}

2. grid-area - 区域定位#

1
.item {
2
  /* 使用命名区域 */
3
  grid-area: header;
4

5
  /* 使用数值 */
6
  grid-area: 1 / 1 / 2 / 4; /* row-start / col-start / row-end / col-end */
7
}

3. justify-self/align-self - 单独对齐#

1
.item {
2
  justify-self: start;   /* 水平对齐 */
3
  justify-self: end;
4
  justify-self: center;
5
  justify-self: stretch;
6

7
  align-self: start;     /* 垂直对齐 */
8
  align-self: end;
9
  align-self: center;
10
  align-self: stretch;
11

12
  /* 简写 */
13
  place-self: center;    /* align-self justify-self */
14
}

🌟 Grid 实用案例#

1. 响应式网页布局#

1
<div class="page-layout">
2
  <header class="header">Header</header>
3
  <nav class="sidebar">Sidebar</nav>
4
  <main class="main">Main Content</main>
5
  <aside class="aside">Aside</aside>
6
  <footer class="footer">Footer</footer>
7
</div>

1
.page-layout {
2
  display: grid;
3
  min-height: 100vh;
4
  grid-template-columns: 250px 1fr 200px;
5
  grid-template-rows: 60px 1fr 40px;
6
  grid-template-areas:
7
    "header header header"
8
    "sidebar main aside"
9
    "footer footer footer";
10
  gap: 10px;
11
}
12

13
.header { grid-area: header; background: #3498db; }
14
.sidebar { grid-area: sidebar; background: #95a5a6; }
15
.main { grid-area: main; background: #ecf0f1; }
16
.aside { grid-area: aside; background: #95a5a6; }
17
.footer { grid-area: footer; background: #34495e; }
18

19
/* 响应式适配 */
20
@media (max-width: 768px) {
21
  .page-layout {
22
    grid-template-columns: 1fr;
23
    grid-template-areas:
24
      "header"
25
      "main"
26
      "sidebar"
27
      "aside"
28
      "footer";
29
  }
30
}

2. 瀑布流相册#

1
<div class="gallery">
2
  <div class="item item-tall">图片1</div>
3
  <div class="item">图片2</div>
4
  <div class="item item-wide">图片3</div>
5
  <div class="item">图片4</div>
6
  <div class="item item-big">图片5</div>
7
  <div class="item">图片6</div>
8
</div>

1
.gallery {
2
  display: grid;
3
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4
  grid-auto-rows: 200px;
5
  gap: 15px;
6
  padding: 20px;
7
}
8

9
.item {
10
  background: #f0f0f0;
11
  border-radius: 8px;
12
  display: flex;
13
  align-items: center;
14
  justify-content: center;
15
  font-weight: bold;
16
  color: #333;
17
}
18

19
.item-tall { grid-row: span 2; }
20
.item-wide { grid-column: span 2; }
21
.item-big {
22
  grid-row: span 2;
23
  grid-column: span 2;
24
}

3. 卡片网格布局#

1
<div class="card-grid">
2
  <div class="card">卡片内容1</div>
3
  <div class="card">卡片内容2</div>
4
  <div class="card">卡片内容3</div>
5
  <div class="card">卡片内容4</div>
6
  <div class="card">卡片内容5</div>
7
  <div class="card">卡片内容6</div>
8
</div>

1
  .card-grid {
2
    display: grid;
3
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
4
    gap: 20px;
5
    padding: 20px;
6
  }
7

8
  .card {
9
    background: white;
10
    padding: 24px;
11
    border-radius: 12px;
12
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
13
    transition: transform 0.2s ease, box-shadow 0.2s ease;
14
  }
15

16
  .card:hover {
17
    transform: translateY(-2px);
18
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
19
  }

⚖️ Flexbox vs Grid 对比#

🎯 使用场景选择#

特性	Flexbox	Grid
维度	一维布局（行或列）	二维布局（行和列）
主要用途	组件内部布局、对齐	页面整体布局、复杂网格
内容驱动	从内容出发的布局	从布局出发的设计
浏览器支持	优秀	现代浏览器支持好
学习曲线	相对简单	功能更强大，稍复杂

📋 选择建议#

使用Flexbox的场景#

🔧 导航栏布局
📱 移动端适配
🎯 居中对齐
📊 表单组件
🎨 卡片内部布局
📐 等高布局

使用Grid的场景#

🏗️ 整体页面布局
📱 复杂响应式设计
🖼️ 图片相册/瀑布流
📊 数据表格
🎨 杂志式布局
📐 不规则网格

🎨 高级技巧与最佳实践#

1. 响应式设计模式#

1
/* 移动优先的响应式Grid */
2
.responsive-grid {
3
  display: grid;
4
  gap: 1rem;
5

6
  /* 移动端：单列 */
7
  grid-template-columns: 1fr;
8

9
  /* 平板：两列 */
10
  @media (min-width: 768px) {
11
    grid-template-columns: repeat(2, 1fr);
12
  }
13

14
  /* 桌面：三列 */
15
  @media (min-width: 1024px) {
16
    grid-template-columns: repeat(3, 1fr);
17
  }
18
}

2. 自适应网格#

1
/* 自动填充网格 */
2
.auto-grid {
3
  display: grid;
4
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
5
  gap: 1rem;
6
}
7

8
/* 自动创建网格 */
9
.auto-create-grid {
10
  display: grid;
11
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
12
  grid-auto-rows: 200px;
13
  gap: 1rem;
14
}

3. 嵌套布局#

1
.nested-layout {
2
  display: grid;
3
  grid-template-columns: 1fr 3fr;
4
  gap: 2rem;
5
}
6

7
.sidebar {
8
  display: flex;
9
  flex-direction: column;
10
  gap: 1rem;
11
}
12

13
.main-content {
14
  display: grid;
15
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
16
  gap: 1.5rem;
17
}

4. 性能优化#

1
/* 使用transform代替改变grid属性 */
2
.item {
3
  transition: transform 0.2s ease;
4
}
5

6
.item:hover {
7
  transform: scale(1.05); /* 而不是改变grid-column等属性 */
8
}
9

10
/* 合理使用will-change */
11
.animated-grid-item {
12
  will-change: transform;
13
}

🔧 调试技巧#

1. 开发工具#

1
/* 临时显示网格线 */
2
.debug-grid {
3
  background-image:
4
    linear-gradient(rgba(255,0,0,0.3) 1px, transparent 1px),
5
    linear-gradient(90deg, rgba(255,0,0,0.3) 1px, transparent 1px);
6
  background-size: 20px 20px;
7
}
8

9
/* Flexbox调试 */
10
.debug-flex {
11
  border: 2px solid red;
12
}
13

14
.debug-flex > * {
15
  border: 1px solid blue;
16
}

2. CSS自定义属性#

1
:root {
2
  --gap: 1rem;
3
  --columns: 3;
4
  --min-item-width: 250px;
5
}
6

7
.configurable-grid {
8
  display: grid;
9
  grid-template-columns: repeat(var(--columns), 1fr);
10
  gap: var(--gap);
11
}
12

13
/* 动态调整 */
14
@media (max-width: 768px) {
15
  :root {
16
    --columns: 1;
17
    --gap: 0.5rem;
18
  }
19
}

🌟 总结#

Flexbox和Grid是现代CSS布局的两大核心技术：

🎯 关键要点#

Flexbox - 适合一维布局，内容驱动，简单灵活
Grid - 适合二维布局，布局驱动，功能强大
组合使用 - 在同一项目中结合使用，发挥各自优势
渐进增强 - 提供fallback方案，确保兼容性
性能考虑 - 合理使用，避免不必要的重排重绘

📈 学习建议#

从基础开始 - 理解核心概念和术语
动手实践 - 通过实际项目加深理解
使用工具 - 利用浏览器开发者工具调试
关注兼容性 - 了解浏览器支持情况
持续学习 - 跟进新特性和最佳实践

掌握Flexbox和Grid布局，你将能够创建出美观、灵活且响应式的现代Web界面！

💡 提示: 在实际开发中，建议优先考虑Grid用于整体布局，Flexbox用于组件内部布局，两者结合使用效果最佳。