flex和grid实现弹性盒子布局

Flexbox（弹性盒模型）和Grid（网格布局）是两种流行的CSS布局技术，它们分别用于创建灵活、响应式的网页布局。这两种方法都提供了强大的能力，让你能够轻松地处理不同屏幕尺寸下的元素排列和对齐。

**Flexbox（弹性布局）**:
- Flexbox主要适用于一维布局，比如一行或一列的内容需要根据容器大小自适应。
- 使用`display: flex`或`display: inline-flex`将容器设置为弹性容器。
- `flex-direction`: 控制子元素的排列方向（row, row-reverse, column, column-reverse）。
- `justify-content`, `align-items`, 和 `align-content`: 分别控制行间、交叉轴对齐方式。
- `flex-grow`, `flex-shrink`, 和 `flex-basis`: 定义元素的伸缩行为和初始大小。

**Grid（网格布局）**:
- Grid布局适用于二维布局，如网格状结构，适合复杂且有序的布局。
- 使用`display: grid`或`display: inline-grid`将容器设置为网格容器。
- `grid-template-columns` 和 `grid-template-rows`: 定义网格的列和行。
- `grid-template-areas`: 可以预定义网格区域。
- `justify-items`, `align-items`, `justify-content`, 和 `align-content`: 对齐网格项目。
- `grid-gap`: 控制网格单元格之间的间隔。