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