Flexbox 布局详细笔记

Flexbox 布局详细笔记

Flexbox（弹性盒子布局）是 CSS3 中用于实现高效、灵活的页面布局的模块，特别适合处理一维布局（行或列）。以下是核心知识点和常见用法：

---

一、Flexbox 基础概念

1. 容器（Flex Container）
   通过 display: flex; 或 display: inline-flex; 将一个元素定义为 Flex 容器。
   其直接子元素自动成为 Flex 项目（Flex Items）。

2. 主轴（Main Axis）与交叉轴（Cross Axis）
   • 主轴：Flex 项目的排列方向（默认水平，由 flex-direction 控制）。
   • 交叉轴：与主轴垂直的方向（默认垂直）。

---

二、容器属性详解

以下属性需设置在 Flex 容器上：

1. flex-direction

定义主轴方向（即项目的排列方向）：

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：从左到右排列。
• column：从上到下排列。

2. flex-wrap

控制项目是否换行：

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：不换行，项目可能溢出容器。
• wrap：换行，新行在下方。
• wrap-reverse：换行，新行在上方。

3. flex-flow（简写）

合并 flex-direction 和 flex-wrap：

.container {
flex-flow: row wrap; /* 方向 + 换行 */
}

4. justify-content

控制项目在主轴上的对齐方式：

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• space-between：两端对齐，项目间隔相等。
• space-around：项目两侧间隔相等。

5. align-items

控制项目在交叉轴上的对齐方式：

.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}

• stretch（默认）：拉伸填满容器高度/宽度。
• center：垂直居中。

6. align-content

多行项目在交叉轴上的对齐方式（需开启 flex-wrap: wrap）：

.container {
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

---

三、项目属性详解

以下属性需设置在 Flex 项目上：

1. order

控制项目的排列顺序（数值越小越靠前）：

.item {
order: 0; /* 默认值 */
}

2. flex-grow

定义项目的放大比例（剩余空间分配）：

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

• 值为 2 的项目会比其他值为 1 的多占一倍剩余空间。

3. flex-shrink

定义项目的缩小比例（空间不足时）：

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

4. flex-basis

定义项目在分配空间前的初始大小：

.item {
flex-basis: auto | 200px | 20%;
}

5. flex（简写）

合并 flex-grow, flex-shrink, flex-basis：

.item {
flex: 1 0 auto; /* grow | shrink | basis */
}

6. align-self

覆盖容器的 align-items，单独设置某个项目的交叉轴对齐：

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

---

四、常见布局示例

1. 水平 + 垂直居中

.container {
display: flex;
justify-content: center; /* 主轴居中 */
align-items: center;     /* 交叉轴居中 */
}

2. 导航栏布局

.nav {
display: flex;
justify-content: space-between;
}

3. 等高等宽卡片

.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 200px; /* 最小宽度 200px，自动换行 */
}

4. 侧边栏 + 内容布局

.container {
display: flex;
}
.sidebar {
flex: 0 0 200px; /* 固定宽度 200px */
}
.content {
flex: 1; /* 占满剩余空间 */
}

---

五、注意事项

1. 浏览器兼容性
   Flexbox 兼容现代浏览器，IE 11 部分支持（需加 -ms- 前缀）。

2. 性能优化
   避免嵌套过多 Flex 容器，可能导致渲染性能下降。

3. Flexbox vs Grid
   • Flexbox 适合一维布局（单行或单列）。
   • Grid 适合二维布局（多行多列）。

---

六、总结

Flexbox 的核心是通过容器与项目的属性组合，灵活控制布局方向、对齐、空间分配。掌握以下关键点：
• 主轴与交叉轴的方向。
• justify-content 和 align-items 的对齐逻辑。
• flex-grow/flex-shrink 的空间分配机制。

实际开发中多用开发者工具调试，直观查看 Flex 容器和项目的尺寸变化！