flex 左中右 自适应间隔布局

Flexbox 是一种 CSS 布局模型，用于创建灵活、可伸缩的响应式网格，特别适用于需要高效利用可用空间和对齐元素的场景。在 Flexbox 中，你可以轻松地实现左、中、右自适应间隔布局（也称为弹性布局）。

1. **设置主轴（main axis）方向**：使用 `flex-direction` 属性，可以选择 `row`（默认值，元素沿水平方向排列）或 `column`（元素沿垂直方向排列）。对于左右布局，通常选择 `row`。

2. **容器属性**：
- `display: flex;` 或 `display: inline-flex;`：将元素转换为 flex 容器。
- `justify-content`：
- `flex-start`：默认值，元素向左对齐。
- `flex-end`：元素向右对齐。
- `center`：元素居中。
- `space-between`：元素等间距分布在主轴上，起点和终点各留空隙。
- `space-around`：每个元素两侧都有等量的间隔。

3. **元素属性**：
- `flex`：定义项目的生长因子，可以是数字（占据的比例）或 auto（自动填充空间）。
- `order`：决定元素在容器中的顺序，数值越小越靠前。

4. **间隙控制**：
- `gap`（新语法）或 `margin` 和 `padding` 可以用来控制主轴和交叉轴（默认垂直方向）之间的间隔。

为了实现左右自适应间隔布局，你可以结合使用上述属性。例如，设置 `justify-content: space-between;` 使元素均匀分布在容器两侧，并根据需要调整 `flex-grow` 来控制各元素的大小。