css3中flex的详细介绍

CSS3中的Flex布局（Flexible Box Layout）是一种用于创建灵活、响应式网页布局的方法。它允许开发者轻松地定义元素在容器内的排列方式，无论屏幕尺寸如何变化，都能保持良好的视觉效果。以下是Flex布局的主要概念和关键属性：

1. **简介**[^1]:
- Flex布局旨在解决传统布局中元素对齐和填充的问题，尤其适合单列或单行布局。

2. **Flex容器（父元素）属性**:
- `justify-content`: 决定主轴上的项目对齐方式，如`flex-start`, `center`, `flex-end`, 或`space-between`。
- `align-items`: 控制交叉轴（垂直方向）上项目的对齐方式，如`flex-start`, `center`, `flex-end`, 或`stretch`。
- `flex-direction`: 指定主轴的方向，可以是`row` (默认，从左到右)，`column` (从上到下) 或`row-reverse`/`column-reverse`。
- `flex-wrap`: 是否允许项目换行，默认`nowrap`，可设置为`wrap`或`wrap-reverse`。
- `align-content`: 当有多行时，决定项目之间的对齐方式，仅在`flex-wrap`设为`wrap`时生效。
- `flex-flow`: 合并了`flex-direction`和`flex-wrap`两个属性。

3. **Flex项（子元素）属性**:
- `flex-grow`: 定义项目在剩余空间中的扩展比例。
- `flex-shrink`: 定义项目缩小时的缩放比例。
- `flex-basis`: 初始大小，不随容器大小变化。
- `flex`: 综合`flex-grow`, `flex-shrink`, 和 `flex-basis` 的值。
- `align-self`: 可以覆盖`align-items`，指定单个项目的垂直对齐方式。

示例[^2]:

<style>
.main-content {
  width: 100%;
  height: 100%;
  background: #72f884;
  display: flex; /* 使用flex布局 */
}

.left-content {
  box-sizing: border-box;
  width: 200px;
  height: 100%;
  background: rgb(238, 119, 34);
}

.right-content {
  box-sizing: border-box;
  flex: 1; /* 自动伸缩，占据剩余空间 */
  height: 100%;
  background: rgb(68, 133, 255);
}
</style>

在这个例子中，`.main-content`作为Flex容器，`.left-content`固定宽度，`.right-content`使用`flex: 1`自动适应剩余空间。