弹性盒子（Flexbox）

弹性盒子（Flexbox）笔记

---

一、什么是弹性盒子？

弹性盒子（Flexbox）是 CSS3 中一种一维布局模型，用于在容器内灵活排列子元素。

核心思想：给父容器设置 display: flex，子元素自动成为 “弹性项目”，可以轻松实现水平/垂直居中、等分布局、自适应排列等。

---

二、为什么用 Flexbox？

传统布局（浮动/定位）	Flexbox 布局
需要清除浮动	无需清除浮动
垂直居中困难	使用 align-items: center 轻松实现
等高布局复杂	默认等高对齐
顺序调整需改变 HTML	用 order 属性改变视觉顺序
响应式适配麻烦	通过 flex-wrap 轻松换行

---

三、核心概念（重要）

text

父容器（弹性容器）  →  display: flex;
子元素（弹性项目）  →  自动成为 flex 项目

两条轴：

轴	方向	默认
主轴（main axis）	水平方向	从左到右
交叉轴（cross axis）	垂直方向	从上到下

text

        主轴（main axis）
    ←———————————————→
    ┌─────────────────┐
    │  item1  item2   │  ↑
    │         item3   │ 交叉轴
    └─────────────────┘  ↓

---

四、容器属性（设置在父元素上）

1. display: flex — 启用弹性盒子

css

.container {
  display: flex;  /* 子元素自动变为弹性项目 */
}

2. flex-direction — 主轴方向

css

.container {
  flex-direction: row;           /* 默认，水平从左到右 */
  flex-direction: row-reverse;   /* 水平从右到左 */
  flex-direction: column;        /* 垂直从上到下 */
  flex-direction: column-reverse;/* 垂直从下到上 */
}

3. justify-content — 主轴对齐

值	效果
flex-start	起点对齐（默认）
flex-end	终点对齐
center	居中对齐
space-between	两端对齐，项目间间距相等
space-around	每个项目两侧间距相等
space-evenly	项目间及两端间距均相等

css

.container {
  justify-content: center;  /* 主轴居中 */
}

4. align-items — 交叉轴对齐（单行）

值	效果
flex-start	起点对齐（顶部）
flex-end	终点对齐（底部）
center	居中对齐（垂直居中）
stretch	拉伸填满容器高度（默认）
baseline	文字基线对齐

css

.container {
  align-items: center;  /* 垂直居中 */
}

5. flex-wrap — 换行

css

.container {
  flex-wrap: nowrap;    /* 默认，不换行 */
  flex-wrap: wrap;      /* 换行，从上到下 */
  flex-wrap: wrap-reverse; /* 换行，从下到上 */
}

6. align-content — 多行交叉轴对齐

注：只有多行（flex-wrap: wrap）时才生效

值	效果
flex-start	行组顶部对齐
flex-end	行组底部对齐
center	行组垂直居中
space-between	行组两端对齐
space-around	每行两侧间距相等
stretch	拉伸填满（默认）

---

五、项目属性（设置在子元素上）

1. order — 排列顺序（数值越小越靠前）

css

.item {
  order: 2;  /* 默认 0，数值小的在前 */
}

2. flex-grow — 放大比例（剩余空间分配）

css

.item {
  flex-grow: 1;  /* 默认 0，不放大 */
}

3. flex-shrink — 缩小比例（空间不足时）

css

.item {
  flex-shrink: 0;  /* 默认 1，允许缩小 */
}

4. flex-basis — 基础大小

css

.item {
  flex-basis: 100px;  /* 默认 auto */
}

5. flex — 简写（grow shrink basis）

css

.item {
  flex: 1;              /* 等价 flex: 1 1 0% */
  flex: 0 0 100px;      /* 固定 100px，不放大不缩小 */
  flex: auto;           /* 等价 flex: 1 1 auto */
}

6. align-self — 单个项目交叉轴对齐（覆盖父容器）

css

.item {
  align-self: center;   /* 单独垂直居中 */
  align-self: flex-end; /* 单独底部对齐 */
}

---

六、常用布局速查

✅ 水平垂直居中（经典）

css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

✅ 两端对齐 + 垂直居中（导航栏）

css

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

✅ 等宽三列（每列均匀分配）

css

.container {
  display: flex;
}
.item {
  flex: 1;  /* 三列等宽 */
}

✅ 左中右三栏（左右固定，中间自适应）

css

.left, .right {
  flex: 0 0 100px;  /* 固定 100px */
}
.center {
  flex: 1;          /* 占据剩余空间 */
}

✅ 响应式换行（卡片网格）

css

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;         /* 间距 */
}
.item {
  flex: 0 0 200px;   /* 每项固定 200px，自动换行 */
}

---

七、速查表

作用	属性（父容器）	属性（子项目）
启用弹性盒	display: flex	—
主轴方向	flex-direction	—
主轴对齐	justify-content	—
交叉轴对齐（单行）	align-items	align-self
多行交叉轴对齐	align-content	—
换行	flex-wrap	—
排列顺序	—	order
放大/缩小/基础	—	flex-grow / flex-shrink / flex-basis