CSS 布局
CSS 布局是网页设计的核心，本章介绍两种最重要的布局系统：Flexbox 和 Grid。
Flexbox 布局
Flexbox（弹性盒布局）是一种一维布局模型，适合处理单行或单列的布局。
基础概念
- 容器（Flex Container）：设置
display: flex的元素 - 项目（Flex Items）：容器的直接子元素
┌─────────────────────────────────┐
│ Flex Container │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Item1│ │Item2│ │Item3│ │
│ └─────┘ └─────┘ └─────┘ │
│ ↑ │
│ Flex Items │
└─────────────────────────────────┘
启用 Flexbox
.container {
display: flex;
}
/* 行内元素 */
.container {
display: inline-flex;
}
Flex 容器属性
flex-direction 主轴方向
.container {
flex-direction: row; /* 左到右（默认） */
flex-direction: row-reverse; /* 右到左 */
flex-direction: column; /* 上到下 */
flex-direction: column-reverse; /* 下到上 */
}
效果预览： flex-direction 效果：
row（默认）- 元素从左到右水平排列column- 元素从上到下垂直排列
flex-wrap 换行
.container {
flex-wrap: nowrap; /* 不换行（默认） */
flex-wrap: wrap; /* 换行 */
flex-wrap: wrap-reverse; /* 反向换行 */
}
justify-content 主轴对齐
.container {
justify-content: flex-start; /* 左对齐（默认） */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中 */
justify-content: space-between; /* 两端对齐 */
justify-content: space-around; /* 环绕对齐 */
justify-content: space-evenly; /* 等间距 */
}
效果预览： justify-content 对齐效果：
space-between- 项目均匀分布，首尾靠边center- 项目居中排列
align-items 交叉轴对齐
.container {
align-items: stretch; /* 拉伸（默认） */
align-items: flex-start; /* 顶部对齐 */
align-items: flex-end; /* 底部对齐 */
align-items: center; /* 居中对齐 */
align-items: baseline; /* 基线对齐 */
}
align-content 多行对齐
.container {
align-content: flex-start; /* 多行顶部 */
align-content: flex-end; /* 多行底部 */
align-content: center; /* 多行居中 */
align-content: space-between; /* 多行两端 */
align-content: space-around; /* 多行环绕 */
}
Flex 项目属性
flex-grow 放大比例
.item {
flex-grow: 1; /* 占据剩余空间的比例 */
}
/* 示例：三个项目，1:2:1 分配 */
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 1; }
flex-shrink 缩小比例
.item {
flex-shrink: 1; /* 空间不足时的缩小比例 */
}
/* 不缩小 */
.item {
flex-shrink: 0;
}
flex-basis 初始大小
.item {
flex-basis: 200px; /* 初始宽度 */
}
/* 简写：grow shrink basis */
.item {
flex: 1 1 200px;
}
flex 简写
/* 常用简写 */
.item {
flex: 1; /* flex: 1 1 0% */
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto */
}
align-self 单独对齐
.item:nth-child(2) {
align-self: center; /* 单独项目居中 */
}
order 排列顺序
.item1 { order: 3; }
.item2 { order: 1; }
.item3 { order: 2; }
Flexbox 实战
1. 水平垂直居中
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
2. 导航栏
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 60px;
background: #2c3e50;
}
.nav-links {
display: flex;
gap: 20px;
}
.nav-links a {
color: white;
text-decoration: none;
}
3. 卡片网格
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* 最小宽度300px */
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
4. 圣杯布局
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
height: 60px;
background: #3498db;
}
.main {
flex: 1;
display: flex;
}
.sidebar {
width: 200px;
background: #f5f5f5;
}
.content {
flex: 1;
padding: 20px;
}
.footer {
height: 60px;
background: #2c3e50;
}
Grid 布局
Grid 布局是二维布局系统，同时控制行和列。
基础概念
┌─────────────────────────────────┐
│ Grid Container │
│ ┌───────┬───────┬───────┐ │
│ │ 1,1 │ 1,2 │ 1,3 │ │
│ ├───────┼───────┼───────┤ │
│ │ 2,1 │ 2,2 │ 2,3 │ │
│ └───────┴───────┴───────┘ │
│ ↑ │
│ Grid Items │
└─────────────────────────────────┘
启用 Grid
.container {
display: grid;
}
/* 行内元素 */
.container {
display: inline-grid;
}
Grid 容器属性
grid-template-columns/rows 定义网格
.container {
/* 固定宽度 */
grid-template-columns: 200px 200px 200px;
/* 百分比 */
grid-template-columns: 33.33% 33.33% 33.33%;
/* fr 单位（比例） */
grid-template-columns: 1fr 2fr 1fr;
/* repeat 函数 */
grid-template-columns: repeat(3, 1fr);
/* 自动填充 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
gap 间距
.container {
gap: 20px; /* 行和列间距 */
row-gap: 20px; /* 行间距 */
column-gap: 30px; /* 列间距 */
}
grid-template-areas 区域命名
.container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
justify-items / align-items
.container {
justify-items: start | end | center | stretch; /* 水平对齐 */
align-items: start | end | center | stretch; /* 垂直对齐 */
}
/* 简写 place-items */
place-items: center; /* 水平和垂直同时 */
justify-content / align-content
.container {
justify-content: start | end | center | space-between | space-around;
align-content: start | end | center | space-between | space-around;
}
Grid 项目属性
grid-column / grid-row 定位
.item {
/* 方式1：起始线和结束线 */
grid-column: 1 / 3; /* 从第1列线到第3列线 */
grid-row: 1 / 2;
/* 方式2：起始线和跨距 */
grid-column: 1 / span 2;
/* 方式3：仅起始线 */
grid-column: 2; /* 从第2列开始，跨1列 */
}
grid-area 区域定位
.item {
grid-area: 1 / 1 / 3 / 2;
/* row-start / column-start / row-end / column-end */
}
justify-self / align-self
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
Grid 实战
1. 响应式网格
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
2. 经典页面布局
.page {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 250px 1fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: content; }
footer { grid-area: footer; }
3. 图片画廊
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}
4. 十二列网格系统
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
Flexbox vs Grid
| 特性 | Flexbox | Grid |
|---|---|---|
| 维度 | 一维（行或列） | 二维（行和列） |
| 适用场景 | 导航、按钮组、卡片 | 页面布局、相册、表单 |
| 内容驱动 | 容器根据内容调整 | 先定义布局再放内容 |
| 对齐方式 | 主轴/交叉轴 | 行/列/单元格 |
选择指南
/* 需要处理一维排列？用 Flexbox */
.navbar { display: flex; }
.card-group { display: flex; }
.button-group { display: flex; }
/* 需要二维布局？用 Grid */
.page-layout { display: grid; }
.gallery { display: grid; }
.form-grid { display: grid; }
/* 可以结合使用 */
.page { display: grid; }
.page .content { display: flex; }
小结
本章学习了：
Flexbox
- 容器属性：flex-direction、flex-wrap、justify-content、align-items
- 项目属性：flex-grow、flex-shrink、flex-basis、flex
- 实战应用：居中、导航、卡片、圣杯布局
Grid
- 容器属性：grid-template-columns/rows、gap、grid-template-areas
- 项目属性：grid-column、grid-row、grid-area
- 实战应用：响应式网格、页面布局、相册
练习
- 使用 Flexbox 实现水平垂直居中
- 使用 Flexbox 创建响应式导航栏
- 使用 Grid 创建响应式图片画廊
- 使用 Grid 实现经典页面布局（header、sidebar、content、footer）
- 结合 Flexbox 和 Grid 实现复杂页面布局