【CSS篇】对 Flex 布局的理解及其使用场景详解Flexbox（弹性盒子布局）是 CSS3 中引入的一种一维布局模型

Flexbox（弹性盒子布局）是 CSS3 中引入的一种一维布局模型，旨在提供一种更高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。它特别适合用于响应式设计，能轻松实现各种复杂的布局结构。

🧠 什么是 Flex 布局？

Flex 是 Flexible Box 的缩写，中文译为“弹性盒子”，它的核心思想是让容器有能力改变其子元素的宽度/高度，以适应不同的显示设备或屏幕尺寸。

一旦将一个元素设置为 display: flex，它就变成了一个 Flex 容器（flex container），其所有直接子元素自动成为 Flex 项目（flex item）。

属性名	说明
`flex-direction`	设置主轴方向（row / row-reverse / column / column-reverse）
`flex-wrap`	控制是否换行（nowrap / wrap / wrap-reverse）
`flex-flow`	`flex-direction` 和 `flex-wrap` 的简写，默认为 `row nowrap`
`justify-content`	主轴上的对齐方式（flex-start / center / flex-end / space-between / space-around）
`align-items`	交叉轴上的对齐方式（stretch / flex-start / center / flex-end / baseline）
`align-content`	多根轴线的对齐方式（仅当换行时有效）

属性名	说明
`order`	定义项目的排列顺序，默认为0，数值越小越靠前
`flex-grow`	定义项目的放大比例，默认为0（不放大）
`flex-shrink`	定义项目的缩小比例，默认为1（空间不足时可缩小）
`flex-basis`	在分配多余空间之前，项目占据的主轴空间，默认为 auto
`flex`	`flex-grow`、`flex-shrink`、`flex-basis` 的简写，默认值为 `0 1 auto`
`align-self`	单个项目覆盖父容器的 `align-items` 设置，默认为 auto

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

📌 适用于弹窗、按钮组、图标居中等场景。

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

📌 适用于头部导航、底部工具栏等需要自动分布空间的场景。

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

📌 适用于图片墙、商品列表、信息卡片等多列布局。

.equal-boxes {
  display: flex;
}
.equal-boxes > div {
  flex: 1;
}

📌 适用于按钮组、选项卡、表单字段排布等。

.layout {
  display: flex;
}
.left, .right {
  width: 200px;
}
.center {
  flex: 1;
}

📌 适用于页面整体布局，如侧边栏+内容区。

.item1 { order: 2; }
.item2 { order: 1; }

📌 可根据设备类型动态调整 DOM 元素顺序，增强响应式体验。

📌 一句话总结：

Flex 布局更适合一维排列（水平或垂直），而 Grid 更适合二维网格布局。

Flex 布局是现代网页布局的核心工具之一，凭借其强大的弹性能力，开发者可以快速构建出各种响应式、对齐良好的界面结构。