在 Flex 布局中，子项（Flex Items）的排列方式由容器属性（父元素）和子项自身属性共同控制。以下是主要的基本属性及其说明：
一、容器（父元素）控制子项排列的核心属性
1. flex-direction：主轴方向
决定子项沿着哪个方向排列。
row（默认）：水平从左到右row-reverse：水平从右到左column：垂直从上到下column-reverse：垂直从下到上
主轴方向改变后，交叉轴也会相应变化。
2. justify-content：主轴对齐方式
控制子项在主轴上的对齐与分布。
flex-start（默认）：起点对齐flex-end：终点对齐center：居中对齐space-between：两端对齐，中间等间距space-around：每个项目两侧间距相等space-evenly：所有间距（包括边缘）相等
3. align-items：交叉轴对齐（单行）
控制子项在交叉轴上的对齐方式（适用于单行）。
stretch（默认）：拉伸填满容器高度（或宽度）flex-start：交叉轴起点对齐flex-end：交叉轴终点对齐center：居中对齐baseline：按文本基线对齐
4. flex-wrap：是否换行
nowrap（默认）：不换行wrap：换行，第一行在上方wrap-reverse：换行，第一行在下方
5. align-content：交叉轴对齐（多行）
仅在多行（flex-wrap: wrap）时生效，控制行与行之间的对齐。
flex-start/flex-end/centerspace-between/space-around/stretch（默认）
二、子项（Item）自身的属性
1. order：排列顺序
- 默认值为
0 - 数值越小越靠前，可为负数
- 用于改变显示顺序，不影响 DOM 结构
2. flex-grow：放大比例
- 默认为
0（不放大） - 若设为
1，表示在剩余空间中按比例扩展
3. flex-shrink：缩小比例
- 默认为
1（空间不足时缩小） - 设为
0则不缩小
4. flex-basis：初始主轴尺寸
- 类似
width或height，但优先级更高 - 可设为
auto、具体值（如100px）等
通常简写为
flex: <grow> <shrink> <basis>，例如flex: 1等价于flex: 1 1 0%
5. align-self：单独对齐方式
- 覆盖容器的
align-items - 取值同
align-items（如center,flex-start等）
总结图示（文字版）
主轴方向 → flex-direction
主轴对齐 → justify-content
交叉轴对齐（单行）→ align-items
交叉轴对齐（多行）→ align-content
子项顺序 → order
子项伸缩 → flex-grow / flex-shrink / flex-basis
子项独立对齐 → align-self
这些属性组合使用，可以实现高度灵活、响应式的布局，非常适合移动端和复杂 UI 场景。
