css，flex美化的命令汇总

CSS Flexbox是一种现代布局模型，用于创建灵活、响应式的网格设计，特别适合于单列布局。下面是一些常用的Flexbox相关的CSS属性和命令汇总：

1. **设置主轴（Axis direction）**:
- `display: flex;` 或 `display: inline-flex;`: 将元素转换为Flex容器。
- `flex-direction: row;` (默认): 子元素从左到右排列。
- `flex-direction: column;`: 子元素从上到下排列。

2. **对齐元素**:
- `justify-content`: 控制主轴上的对齐方式，如 `flex-start`, `center`, `flex-end`, `space-between`, `space-around`.
- `align-items`: 控制交叉轴（垂直方向）上的对齐方式，如 `stretch`, `flex-start`, `center`, `flex-end`, `baseline`, `align-self`.

3. **调整子元素空间**:
- `margin`: 可以像平常一样设置，但不影响弹性空间。
- `gap` / `padding-inline-start`, `padding-inline-end`: 设置行内项目之间的间隔。
- `flex-grow`, `flex-shrink`, `flex-basis`: 分配剩余空间和基础大小，分别控制伸缩、收缩和初始大小。

4. **子元素处理**:
- `order`: 调整子元素在容器中的顺序。
- `align-self`: 对个别子元素提供自定义的交叉轴对齐。

5. **弹性容器尺寸**:
- `flex-wrap`: 是否换行，`nowrap`, `wrap`, `wrap-reverse`.
- `flex-container` 的 `min-width`, `max-width` 等，可以影响其自身尺寸。

6. **设备适应**:
- `@media (max-width:)`: 使用媒体查询调整Flexbox在不同屏幕尺寸下的样式。

7. **禁用Flexbox**:
- 当需要将元素恢复为常规流布局时，可以使用 `display: block` 或 `display: inline-block`.