Flexbox
🧩 一、什么是 Flexbox
Flexbox 全称是 Flexible Box Layout（弹性盒子布局）。
👉 它是一种 一维布局模型，用于在一行或一列上高效地排列、对齐和分配空间。
用一句话说：
Flexbox 让你可以很轻松地让元素水平垂直居中、自动对齐、按比例分布，而不用写很多复杂的 float、position 或 margin。
二、基本结构
一个 Flex 布局至少包含两部分：
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
.container {display: flex; /* 关键！让这个容器成为弹性盒子 */
}
三、Flexbox 的两条轴线
Flexbox 的所有对齐、方向都基于两条轴：
主轴（main axis）：默认是水平方向（从左到右）
交叉轴（cross axis）：垂直方向（从上到下）
可以通过 flex-direction 改变主轴方向。
.container {display: flex;flex-direction: row; /* row | row-reverse | column | column-reverse */
}四、常用属性汇总
1. 容器属性（作用于父元素）
| 属性 | 作用 |
|---|---|
display: flex | 开启弹性布局 |
flex-direction | 主轴方向（横排或竖排） |
flex-wrap | 是否换行 |
justify-content | 主轴对齐（左右分布） |
align-items | （一行）交叉轴对齐（上下分布） |
align-content | （多行）多行内容在交叉轴的分布 |
flex-flow | flex-direction和flex-wrap合起来 |
align-items 和align-content
| 属性值 | 含义 | 效果示意 |
|---|---|---|
flex-start | 从主轴起点开始对齐（默认值） | 🔳🔳🔳□□□□ |
flex-end | 从主轴终点开始对齐 | □□□□🔳🔳🔳 |
center | 居中对齐 | □🔳🔳🔳□ |
space-between | 两端对齐，中间平均分配间距 | 🔳—🔳—🔳 |
space-around | 每个元素两侧间距相等（首尾留一半空隙） | ½🔳—🔳—🔳½ |
space-evenly | 所有间距完全相等（包括首尾） | 🔳—🔳—🔳—🔳 |
示例：
.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}
👉 这两行是 最常用的居中写法！
2. 项目属性（作用于子元素）
| 属性 | 作用 |
|---|---|
flex-grow | 放大比例（多余空间怎么分配） |
flex-shrink | 缩小比例 |
flex-basis | 初始大小 |
flex | 组合简写：flex: grow shrink basis; |
align-self | 单独控制某个子项的对齐 |
order | 顺序 (… -1, 0 (default), 1, …) |
align-self 的属性
| 属性值 | 含义 | 说明 |
|---|---|---|
auto | 默认值 | 继承父容器的 align-items 值 |
flex-start | 顶部对齐（交叉轴起点） | 相当于“靠上”或“靠左” |
flex-end | 底部对齐（交叉轴终点） | 相当于“靠下”或“靠右” |
center | 居中对齐 | 在交叉轴上居中 |
baseline | 文字基线对齐 | 以文字底线对齐（常用于文本） |
stretch | 拉伸填满（默认） | 如果项目未设置高度，会被拉伸以占满交叉轴空间 |
示例：
.item:nth-child(1) {flex: 1; /* 自动分配剩余空间 */
}
.item:nth-child(2) {flex: 2; /* 占的空间是前一个的两倍 */
}
五、几个典型布局案例
1. 元素水平垂直居中
.container {display: flex;justify-content: center;align-items: center;
}2. 左右布局，中间自适应
.container {display: flex;
}
.left, .right {width: 200px;
}
.middle {flex: 1; /* 自动填满剩余空间 */
}
3. 平均分布（导航栏常用）
.nav {display: flex;justify-content: space-between;
}六、Flexbox 的优点
✅ 简化布局逻辑（不用 float、position）
✅ 自适应能力强（响应式更容易）
✅ 居中对齐极其方便
✅ 动态分配空间
七、可视化学习推荐
你可以用这些工具 直观地练习 Flexbox：
🌐 Flexbox Froggy（游戏学 Flex）
🧩 CSS Tricks Flexbox 完整指南
🧱 Flexbox Visual Playground