好的，阿杰～我来给你整理一份 弹性布局（Flexbox）属性详解，适合新手和进阶都能看懂。

🧩 弹性布局（display:flex;）属性详解

display:flex; 让容器成为 弹性容器 (flex container)，其直接子元素是 弹性项目 (flex items)。
主要分为两类属性：

1️⃣ 容器属性（作用于父元素）

.container {
  display: flex; /* 激活弹性布局 */
}

（1）主轴方向

• flex-direction
  • row（默认） → 主轴为水平方向，项目从左到右
  • row-reverse → 水平从右到左
  • column → 主轴为垂直方向，从上到下
  • column-reverse → 垂直从下到上

（2）是否换行

• flex-wrap
  • nowrap（默认） → 不换行，项目会被压缩
  • wrap → 超出自动换行，从上到下
  • wrap-reverse → 换行，但从下往上

⚡ 常用组合：

flex-flow: row wrap; /* direction + wrap */

（3）主轴对齐方式

• justify-content
  • flex-start（默认） → 靠左/上
  • flex-end → 靠右/下
  • center → 居中
  • space-between → 两端对齐，项目间距均匀
  • space-around → 项目间距均匀，首尾有空隙
  • space-evenly → 项目和首尾间隔完全相等

（4）交叉轴对齐方式

• align-items
  • stretch（默认） → 拉伸填满
  • flex-start → 顶部对齐
  • flex-end → 底部对齐
  • center → 垂直居中
  • baseline → 文字基线对齐

（5）多行交叉轴对齐

• align-content（仅对多行生效）
  • flex-start → 所有行靠上
  • flex-end → 所有行靠下
  • center → 所有行居中
  • space-between → 各行两端对齐
  • space-around → 行间距均匀，边缘有空隙
  • stretch（默认） → 拉伸均分容器高度

2️⃣ 项目属性（作用于子元素）

（1）顺序

• order: n（默认 0，值越小越靠前）

（2）放大比例

• flex-grow: n（默认 0，表示不会放大）
  • 如果所有项目都 flex-grow:1，则等比填满容器

（3）缩小比例

• flex-shrink: n（默认 1，允许被压缩）
  • 设置 0 表示不缩小

（4）项目初始大小

• flex-basis: auto | <px/%>
  优先级高于 width

（5）综合简写

• flex: grow shrink basis

.item {
  flex: 1;          /* 等价于 flex: 1 1 0% */
  flex: 0 0 100px;  /* 固定宽度 100px，不缩放 */
}

（6）单独对齐

• align-self
  • 覆盖 align-items，取值相同：auto | flex-start | flex-end | center | baseline | stretch

3️⃣ 常用布局示例

居中对齐（经典）

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

两栏自适应

.container {
  display: flex;
}
.left {
  flex: 0 0 200px; /* 固定宽度 */
}
.right {
  flex: 1;         /* 占满剩余空间 */
}

✨ 总结：

• 父容器主要控制 布局走向和对齐
• 子项目主要控制 大小、伸缩、顺序