flexbox的用法

Flexbox (弹性盒模型) 是一种现代 CSS 布局模式，用于创建灵活、响应式的网页设计，特别是当需要在不同屏幕尺寸上自动调整元素排列时。以下是 Flexbox 的基本用法：

1. **启用Flexbox**: 首先，在包含元素的容器上应用 `display: flex` 或 `display: inline-flex` 样式，使其成为flex容器。

.container {
  display: flex;
}

2. **主轴（main axis）和侧轴（cross-axis）**: 默认情况下，主轴沿水平方向，侧轴垂直于主轴。通过 `flex-direction` 属性可以选择主轴的方向，如 `row`（默认），`column`，`row-reverse` 和 `column-reverse`。

3. **项目排序和对齐**: 使用 `justify-content` 对齐主轴上的项目，如 `flex-start`（开始）、`center`（居中）、`flex-end`（结束）等；`align-items` 控制侧轴上的对齐方式。

4. **flex生长（flex-grow）和缩放（flex-shrink）**: 通过 `flex-grow` 属性分配剩余空间，`flex-shrink` 控制在空间不足时压缩项目。

5. **flex基础属性**: `flex-basis` 设置项目的初始大小，`flex-wrap` 决定是否换行。

6. **指定顺序**: 如果需要特定项目优先，可以使用 `order` 属性，数值越大越靠前。

7. **弹性项（flexible items）**: 对单个项目设置 `flex` 属性，可以分别指定基础大小、增长、收缩等因素。

例如：

.item {
  flex: 1 0 auto; /* 指定基础大小1（flex-basis）, 允许增长（flex-grow）, 不允许收缩（flex-shrink）*/
}

.container {
  justify-content: center;
  align-items: center;
}

**相关问题--:**
1. 列出几种常用的 `justify-content` 值有哪些？
2. 何时会触发 Flexbox 的换行 (`flex-wrap` 属性)?
3. 如何使用 Flexbox 创建响应式的网格系统?