CSS Flexbox 实战 — 一维布局终极方案
全面掌握Flexbox弹性布局：主轴与交叉轴、对齐方式、弹性比例、常见布局模式（居中、圣杯、网格等） · 难度：进阶 · +15XP
CSS Flexbox 实战 — 一维布局终极方案
Flexbox（弹性盒子布局）是现代CSS最强大的布局工具之一，专为解决一维布局（横向或纵向排列元素）而设计。它让你轻松实现元素居中、等分空间、自适应排列等效果，告别float和position的种种困扰。
Flexbox核心概念
Flexbox 布局中有两个关键角色：容器（flex container）和项目（flex items）。设置 display: flex 的元素成为容器，它的直接子元素自动成为项目。布局的核心是主轴和交叉轴——主轴是元素的排列方向，交叉轴与主轴垂直。
容器属性一览
| 属性 | 值 | 说明 |
|---|---|---|
flex-direction | row | column | row-reverse | column-reverse | 主轴方向 |
justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | 主轴对齐方式 |
align-items | stretch | flex-start | center | flex-end | baseline | 交叉轴对齐方式 |
flex-wrap | nowrap | wrap | wrap-reverse | 是否允许换行 |
align-content | stretch | center | space-between等 | 多行时的交叉轴对齐 |
gap | 长度值 | 项目之间的间距 |
项目属性一览
| 属性 | 说明 |
|---|---|
flex-grow | 放大比例（默认0，不放大） |
flex-shrink | 缩小比例（默认1，空间不足时缩小） |
flex-basis | 初始大小（默认auto） |
flex | 简写：flex-grow flex-shrink flex-basis |
align-self | 单独设置某个项目的交叉轴对齐 |
order | 排列顺序（默认0，越小越靠前） |
常用布局模式
/* 1. 完美居中（最常用的Flexbox技巧） */
.center-box {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh;
}
/* 2. 导航栏：logo在左，菜单在右 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
/* 3. 三栏等分布局 */
.columns {
display: flex;
gap: 20px;
}
.columns > div {
flex: 1; /* 等价于 flex: 1 1 0%，三个div等分空间 */
}
/* 4. 左侧固定宽度，右侧自适应 */
.sidebar-layout {
display: flex;
gap: 20px;
}
.sidebar { width: 250px; flex-shrink: 0; } /* 不缩小 */
.main-content { flex: 1; } /* 占满剩余空间 */
/* 5. 响应式网格（自动换行） */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* 最小300px，自动换行 */
/* 当容器宽度 < 300px + gap 时自动换行 */
}
/* 6. 粘性页脚：内容不够时页脚沉底 */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content { flex: 1; } /* 撑满剩余空间 */
.footer { height: 60px; }
/* 7. 水平排列 + 垂直居中 + 两端对齐（导航菜单） */
.menu {
display: flex;
justify-content: space-between;
align-items: center;
}
动手练习
- 导航栏制作：使用Flexbox创建一个响应式导航栏，包含：左侧Logo、中间6个菜单项、右侧"登录"按钮。在小屏幕上菜单项折叠。
- 卡片网格：使用flex-wrap + flex-basis制作一个课程卡片网格，每张卡片最小300px宽，自动换行，无论屏幕多宽都美观排列。
- 圣杯布局：使用Flexbox实现经典的"圣杯布局"——页头(full width)、中间三栏(左250px边栏 + 中间自适应主内容 + 右200px边栏)、页脚(full width)，设置min-height为100vh。