Flexbox 基本概念

Flexbox 是一种一维布局模型，专注于在行或列中分配空间。它通过容器（flex container）和项目（flex items）的交互实现灵活布局。容器默认沿主轴（main axis）排列项目，交叉轴（cross axis）垂直于主轴。

容器属性

display: flex
将元素定义为 flex 容器，其子元素自动成为 flex 项目。内联 flex 容器使用 display: inline-flex。

flex-direction
定义主轴方向：

• row（默认）：水平排列，主轴为从左到右
• row-reverse：水平反向排列
• column：垂直排列
• column-reverse：垂直反向排列

flex-wrap
控制项目是否换行：

• nowrap（默认）：单行排列
• wrap：多行排列
• wrap-reverse：反向换行

justify-content
主轴对齐方式：

• flex-start（默认）：向主轴起点对齐
• flex-end：向主轴终点对齐
• center：居中
• space-between：两端对齐，项目间隔相等
• space-around：项目两侧间隔相等

align-items
交叉轴对齐方式：

• stretch（默认）：拉伸填满容器高度
• flex-start：向交叉轴起点对齐
• flex-end：向交叉轴终点对齐
• center：居中
• baseline：按项目基线对齐

项目属性

flex-grow
定义项目放大比例，默认值为 0（不放大）。若某项目设为 1，其他项目为 0，它将占据剩余空间。

flex-shrink
定义项目缩小比例，默认值为 1（允许缩小）。设为 0 可禁止项目缩小。

flex-basis
设置项目初始尺寸，可接受像素值或百分比。默认值为 auto（根据内容计算）。

flex
简写属性，格式为 flex: <grow> <shrink> <basis>。例如：

• flex: 1 → 1 1 0%
• flex: 0 auto → 0 1 auto

align-self
覆盖容器的 align-items 设置，允许单个项目自定义交叉轴对齐方式。

实用示例

水平居中元素

.container {
  display: flex;
  justify-content: center;
}

等宽多列布局

.item {
  flex: 1; /* 所有项目平分空间 */
}

底部对齐项目

.container {
  display: flex;
  align-items: flex-end;
}

响应式换行

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 0 200px; /* 最小宽度 200px */
}