弹性盒子

弹性盒子

一、什么是弹性盒子？

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

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

---

二、为什么用 Flexbox？

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

---

三、核心概念（重要）

text

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

两条轴：

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

---

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

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

css

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