Flex 布局是 CSS 中的一种强大布局方式，旨在让容器内的元素能更灵活地排列。通过使用 display: flex，可以轻松控制元素的对齐、方向和间距等。

Flex 布局的基本概念

Flex 布局是基于 容器 和 项 这两个概念的。通过设置容器的 display: flex，它的直接子元素会成为 Flex 项。

容器属性：

• flex-direction: 设置主轴的方向，决定了项的排列方向。可选值：
  • row（默认）：横向排列
  • column: 纵向排列
  • row-reverse: 横向反向排列
  • column-reverse: 纵向反向排列
• justify-content: 设置主轴上对齐方式。可选值：
  • flex-start（默认）：靠左对齐
  • flex-end: 靠右对齐
  • center: 居中对齐
  • space-between: 两端对齐，项目之间有相等的间隔
  • space-around: 每个项目两侧的间隔相等
• align-items: 设置交叉轴上对齐方式。可选值：
  • flex-start: 顶部对齐
  • flex-end: 底部对齐
  • center: 垂直居中
  • stretch（默认）：拉伸以填充容器
  • baseline: 按基线对齐
• align-self: 允许单个项在交叉轴上有不同的对齐方式，覆盖 align-items。

项属性：

• flex-grow: 定义项目的放大比例，默认值为 0，表示如果有剩余空间，项目不会放大。
• flex-shrink: 定义项目的缩小比例，默认值为 1，表示如果空间不足，项目会缩小。
• flex-basis: 定义项目的初始大小，默认值为 auto，表示根据项目内容决定。
• flex: 是 flex-grow、flex-shrink 和 flex-basis 的简写形式。
• align-self: 覆盖容器的 align-items 属性，为单个项设置独立的对齐方式。

示例

<div style=

在这个例子中，三个项目会被水平和垂直居中对齐。

Flex 布局的优势

1. 简单：Flex 布局通过少量的 CSS 属性就可以轻松实现复杂的布局。
2. 灵活性：它能适应不同屏幕尺寸，避免了传统布局的局限性。
3. 易于实现响应式设计：通过调整容器和项的属性，能快速实现不同的显示效果。

使用场景

• 水平垂直居中：通过 justify-content 和 align-items 可以轻松实现居中。
• 等高布局：使多个项高度一致，或者根据内容动态调整。
• 响应式布局：在不同的屏幕宽度下，使用 flex-wrap 和 flex-basis 等属性来自动调整项的排列。

注意事项

1. 兼容性：尽管 Flex 布局在现代浏览器中支持良好，但某些老旧浏览器（如 IE10 以下）可能不完全支持。
2. 布局限制：对于极复杂的布局，可能仍需使用其他 CSS 技巧或 Grid 布局。

Flex 布局使得开发人员可以更加高效地构建灵活、响应式的布局，它简单、易用且强大。