Flex 容器属性详解

容器属性总览

以下属性写在 Flex 容器上：

属性	作用
flex-direction	主轴方向
flex-wrap	是否换行
flex-flow	direction + wrap 简写
justify-content	主轴对齐/分配空间
align-items	单行交叉轴对齐
align-content	多行交叉轴对齐
gap / row-gap / column-gap	项目间距

---

flex-direction

决定主轴方向与起点。

.container { flex-direction: row; /* 默认 */ }

值	主轴	起点
row	水平 →	左
row-reverse	水平 ←	右
column	垂直 ↓	上
column-reverse	垂直 ↑	下

/* 移动端常见：纵向堆叠 */
.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

⚠️ row-reverse / column-reverse 会改变视觉顺序，但 DOM 与 Tab 顺序不变，无障碍场景需谨慎。

---

flex-wrap

值	含义
nowrap（默认）	强行单行，可能溢出或压缩
wrap	空间不足时换到下一行
wrap-reverse	换行，交叉轴方向相反

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

---

flex-flow（简写）

.container {
  flex-flow: row wrap;
  /* 等价于 */
  flex-direction: row;
  flex-wrap: wrap;
}

---

justify-content（主轴）

在主轴上分配多余空间或对齐项目。

值	效果
flex-start	靠主轴起点
flex-end	靠主轴终点
center	居中
space-between	两端贴边，中间均分空隙
space-around	两侧有半份空隙
space-evenly	空隙完全均等
start / end	相对书写模式的起止（更现代）
left / right	物理左右（在水平主轴时有用）

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

现代写法也可用：

.container {
  justify-content: safe center; /* 溢出时尽量避免裁切不可见内容 */
}

---

align-items（交叉轴，单行/逐项）

值	效果
stretch（默认）	拉伸填满交叉轴（需交叉轴尺寸为 auto）
flex-start / start	交叉轴起点
flex-end / end	交叉轴终点
center	交叉轴居中
baseline	文字基线对齐

.media {
  display: flex;
  align-items: center; /* 图标与文字垂直居中 */
  gap: 8px;
}

---

align-content（多行整体）

仅当换行且存在多行时生效；控制多行作为一个整体在交叉轴上的分布。

常用值与 justify-content 类似：flex-start、center、space-between、stretch 等。

.grid-like {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* 多行靠上，避免被 stretch 拉开 */
  gap: 12px;
}

---

gap

推荐用 gap 替代 margin 技巧制造间距。

.container {
  display: flex;
  gap: 16px;              /* 行列间距相同 */
  /* 或 */
  row-gap: 12px;
  column-gap: 24px;
  /* 简写 */
  gap: 12px 24px;         /* row column */
}

优点：

• 不会在首尾产生多余外边距
• 换行后间距行为更直观
• 与 Grid 语法一致

---

组合示例

响应式卡片行

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
  align-content: flex-start;
}
.card {
  flex: 1 1 240px; /* 基础 240px，可放大缩小 */
  max-width: 100%;
}

圣杯式简单页头

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.header__nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

速记

• 主轴怎么走 → flex-direction
• 能不能折行 → flex-wrap
• 主轴怎么排 → justify-content
• 交叉轴怎么齐 → align-items（单项）/ align-content（多行）
• 缝多大 → gap