flex的几个常用属性

Flexbox 是 CSS 中的一种布局模型，它提供了一种高效的方式来组织和对齐元素，特别是在需要适应屏幕大小变化或内容动态变化的场景。以下是 Flexbox 中的一些常用属性：

1. **display**: 设置元素是否采用 Flexbox 布局，比如 `display: flex` 或 `display: inline-flex`。

2. **flex-direction**: 控制主轴的方向，可以是 `row` (默认，行)、`column` (列) 或者 `row-reverse` 和 `column-reverse` 分别反转方向。

3. **flex-wrap**: 决定项目是否换行，`nowrap` (默认) 保持在同一行，`wrap` 开启换行，`wrap-reverse` 则反向换行。

4. **justify-content**: 如前所述，控制子元素沿主轴的对齐方式。

5. **align-items**: 调整子元素在交叉轴（默认垂直方向）上的对齐方式，如 `start`, `end`, `center`, `stretch` 等。

6. **align-self**: 允许单个子元素独立地调整其在交叉轴上的位置，适用于那些不想遵守 `align-items` 规则的元素。

7. **flex-grow**: 子元素放大比例，默认为0，如果存在剩余空间，分配给每个生长项的比例。

8. **flex-shrink**: 子元素缩小比例，默认为1，当空间不足时，按此比例缩放元素。

9. **flex-basis**: 定义了未拉伸前的基础尺寸，通常与 `width` 或 `height` 类似，但更灵活。

理解并掌握这些属性有助于创建灵活和适应性强的网页布局。