CSS3 Flexbox弹性盒子完全指南
专为编程小白设计的Flexbox详细知识点汇总，通俗易懂的解释+可视化示例
💡 Flexbox是一种强大的CSS布局模型，可以轻松创建响应式页面结构，无需使用浮动和定位就能实现元素的对齐和分布。
什么是Flexbox?
Flexbox（弹性盒子）是一种CSS3的布局模式，设计用于在容器内更有效地排列、对齐和分配空间，即使容器的大小是未知或动态变化的。
想象Flexbox就像一个有弹性的收纳盒（容器），里面的物品（项目）可以灵活调整位置和大小，适应不同空间的需求。
为什么需要Flexbox?
- 轻松实现垂直居中（传统CSS的难题）
- 创建自适应布局，无需媒体查询
- 简化复杂布局的实现
- 容器内的项目可以自动调整大小和顺序
基本概念
弹性容器（Flex Container）
任何设置为 display: flex 或 display: inline-flex 的元素。
弹性项目（Flex Items）
容器内的直接子元素自动成为弹性项目。
主轴（Main Axis）
项目排列的主要方向（默认水平，从左到右）。
交叉轴（Cross Axis）
垂直于主轴的轴（默认垂直，从上到下）。
容器属性详解
这些属性应用于弹性容器（父元素）。
| 属性 | 说明 | 常用值 | 示例 |
|---|---|---|---|
display |
定义弹性容器 | flex | inline-flex |
display: flex; |
flex-direction |
主轴方向 | row（默认）row-reversecolumncolumn-reverse |
flex-direction: column; |
flex-wrap |
是否换行 | nowrap（默认）wrapwrap-reverse |
flex-wrap: wrap; |
justify-content |
主轴对齐方式 | flex-startflex-endcenterspace-betweenspace-aroundspace-evenly |
justify-content: center; |
align-items |
交叉轴对齐方式 | stretch（默认）flex-startflex-endcenterbaseline |
align-items: center; |
align-content |
多行项目在交叉轴的对齐 | stretchflex-startflex-endcenterspace-betweenspace-around |
align-content: space-between; |
示例：justify-content的不同效果
1
2
3
1
2
3
1
2
3
项目属性详解
这些属性应用于弹性项目（子元素）。
| 属性 | 说明 | 常用值 | 示例 |
|---|---|---|---|
order |
项目排列顺序 | 数值（默认0） | order: 1; |
flex-grow |
项目放大比例 | 数值（默认0） | flex-grow: 1; |
flex-shrink |
项目缩小比例 | 数值（默认1） | flex-shrink: 0; |
flex-basis |
项目初始大小 | 长度值 | auto |
flex-basis: 200px; |
flex |
flex-grow, flex-shrink 和 flex-basis的简写 | 常用 1 或 auto |
flex: 1; |
align-self |
单个项目交叉轴对齐方式 | autoflex-startflex-endcenterbaselinestretch |
align-self: flex-end; |
1 (order:2)
2 (grow:2)
3 (self-end)
实际应用示例
完美垂直居中
.container {
display: flex;
justify-content: center;
align-items: center;
}
display: flex;
justify-content: center;
align-items: center;
}
等宽卡片布局
.cards {
display: flex;
flex-wrap: wrap;
}
.card {
flex: 1;
min-width: 300px;
margin: 10px;
}
display: flex;
flex-wrap: wrap;
}
.card {
flex: 1;
min-width: 300px;
margin: 10px;
}
响应式导航栏
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 768px) {
.navbar {
flex-direction: column;
}
}
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 768px) {
.navbar {
flex-direction: column;
}
}
圣杯布局
Header
Main
Sidebar
Footer
Flexbox最佳实践
- 优先使用
flex简写属性：flex: 1比flex-grow:1; flex-shrink:1; flex-basis:0;更简洁 - 使用
margin: auto可以创建独特的对齐效果 - 结合媒体查询实现响应式布局
- 项目默认会收缩但不会扩展，使用
flex-shrink:0防止项目收缩 - 注意浏览器兼容性：现代浏览器都支持，但旧版浏览器需要前缀
🚀 Flexbox最适合小规模布局组件（导航、卡片、工具栏等），大规模布局建议使用CSS Grid