Flex 弹性盒布局
CSS3引入的强大一维布局模式，特别适合处理行或列方向的排列。
核心属性
| 属性 | 说明 | 常用值 |
|---|---|---|
display: flex |
启用Flex布局 | flex / inline-flex |
flex-direction |
主轴方向 | row / column |
justify-content |
主轴对齐 | space-between / center |
align-items |
交叉轴对齐 | center / stretch |
flex-wrap |
换行控制 | wrap / nowrap |
应用场景
适用：导航菜单、卡片列表、表单控件、垂直居中、响应式栅格系统
示意图
项目1
项目2
项目3
居中
justify-content: space-between | align-items: center
实际例子 - 导航菜单 + 卡片列表
Logo
首页
产品
关于
📦
产品A
🎨
产品B
🚀
产品C
/* 导航 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 卡片列表 */
.cards {
display: flex;
gap: 16px;
}
.card {
flex: 1;
}