每天一个前端小知识 Day 2 - Flexbox 布局模型

Flexbox 布局模型（CSS Flex 弹性盒模型）

1. 为什么要学习 Flexbox？

传统布局方式（如 float, inline-block, table）存在：

• 居中困难；
• 等高列实现繁琐；
• 代码不够语义化；
• 响应式适配能力差。

而 Flexbox（CSS Flexible Box Layout）为这些常见问题提供了简洁、强大、现代化的解决方案，适合构建一维方向的布局（横排或竖排）。

---

2. Flexbox 核心概念

容器与项目（Container vs. Item）

display: flex;

在父元素上设置 display: flex 后，其子元素即变为 flex 项目。

---

主轴与交叉轴

方向设置	主轴方向	交叉轴方向
flex-direction: row（默认）	水平（左→右）	垂直（上→下）
flex-direction: column	垂直（上→下）	水平（左→右）

---

3. Flex 容器属性

属性	说明
flex-direction	主轴方向（row, row-reverse, column, column-reverse）
flex-wrap	是否换行（nowrap, wrap, wrap-reverse）
justify-content	沿主轴对齐方式（flex-start, center, space-between, space-around 等）
align-items	沿交叉轴对齐方式（stretch, center, flex-start 等）
align-content	多行时沿交叉轴的整体对齐（与 align-items 区分）

---

4. Flex 项目属性

属性	说明
flex-grow	剩余空间如何分配（默认 0，不放大）
flex-shrink	空间不足时如何缩小（默认 1，会缩小）
flex-basis	初始大小（默认 auto，可设定像素、百分比等）
flex	简写形式：flex: grow shrink basis（如 flex: 1 0 auto）
align-self	单个项目沿交叉轴对齐方式，覆盖 align-items 设置

---

5. 快速记忆公式：flex: 1

最常见用法就是：

flex: 1; // 项目占据所有可用空间，等分

相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 0;，是面试中高频考察点。

---

6. 面试实战题目

Q1：如何使用 Flex 实现水平居中 + 垂直居中？

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

---

Q2：如何实现左右两侧固定，中间自适应的三栏布局？

<div class="container">
  <div class="left">Leftdiv>
  <div class="middle">Middlediv>
  <div class="right">Rightdiv>
div>

.container {
  display: flex;
}
.left, .right {
  width: 100px;
}
.middle {
  flex: 1;
}

---

Q3：Flex 与 Grid 有什么区别？

比较点	Flexbox	Grid
维度	一维布局（横向或纵向）	二维布局（行+列）
适用场景	列表、导航栏、组件局部布局	整体页面布局，复杂网格结构
项目顺序	默认 DOM 顺序	可重新排布，不依赖文档结构
学习曲线	相对简单	稍复杂但功能更强大

---

7. 常见误区

• 误区1：设置 display: flex 后，所有子元素都会自动平分空间？ ❌
  ➜ 实际上，只有在设置 flex: 1 后才会如此。

• 误区2：align-items 与 align-self 是一样的？ ❌
  ➜ 前者是统一设置所有项目，后者单独设置某一项。

• 误区3：justify-content 和 align-items 不能混用？ ❌
  ➜ 它们分别对应主轴与交叉轴，完全可以组合使用。

---

8. 实战建议

• Flex 是应对响应式布局的利器，大量场景中比 float/position 更优。
• 可以配合媒体查询实现自适应组件。
• 常配合 gap 属性使用（现代浏览器已支持）。
• flex-wrap: wrap 用于多行布局（如标签云）。

---

✅ 总结

Flexbox 是 CSS3 布局革命中的核心模块，适合绝大多数日常前端开发中的一维布局需求。面试中，关于它的使用、原理、属性组合是高频问题，掌握熟练能大幅提升你的 CSS 技术深度。