[!info] related notes

• 所属 MOC: CSS MOC
• 相关概念: css-grid, CSS 居中布局

CSS Flexbox

定义

Flexbox（弹性盒布局）是一种一维布局模型，用于在容器内对子元素进行排列、对齐和分配空间。“一维”意味着它一次只处理一个方向——行或列。

机制

容器设置 display: flex 后，子元素成为 flex item，沿主轴排列。通过控制主轴和交叉轴的属性来实现各种布局。

核心概念：

• 主轴（main axis）：由 flex-direction 决定，默认水平（row）
• 交叉轴（cross axis）：与主轴垂直
• flex item：容器的直接子元素

容器属性

.container {
  display: 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 | space-evenly;

  /* 交叉轴对齐 */
  align-items: flex-start | flex-end | center | stretch | baseline;

  /* 多行时交叉轴对齐 */
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

  /* 间距 */
  gap: 10px;
}

项目属性

.item {
  /* 排列顺序，数值越小越靠前 */
  order: 0;

  /* 放大比例，默认 0（不放大） */
  flex-grow: 1;

  /* 缩小比例，默认 1（会缩小） */
  flex-shrink: 0;

  /* 基础大小，分配剩余空间前的初始尺寸 */
  flex-basis: auto | 200px;

  /* 简写 */
  flex: 0 1 auto; /* grow shrink basis */

  /* 单独对齐 */
  align-self: flex-end | center | stretch;
}

flex 简写的三个特殊值

flex: 1;      /* 等于 flex: 1 1 0% — 会放大，会缩小，基准为 0 */
flex: auto;   /* 等于 flex: 1 1 auto — 会放大，会缩小，基准为内容大小 */
flex: none;   /* 等于 flex: 0 0 auto — 不放大，不缩小，基准为内容大小 */

常见布局模式

水平垂直居中

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

等分三列

.three-col {
  display: flex;
  gap: 16px;
}
.three-col > * {
  flex: 1;
}

左固定右自适应

.layout {
  display: flex;
}
.sidebar {
  flex: 0 0 250px;
}
.main {
  flex: 1;
}

底部固定（sticky footer）

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

导航栏（logo 左，菜单右）

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

Flexbox vs Grid

	Flexbox	Grid
维度	一维（行或列）	二维（行和列同时控制）
适用场景	线性排列、对齐、分配空间	复杂的网格布局、区域划分
内容驱动	是（内容决定布局）	否（布局先于内容定义）
嵌套	需要嵌套容器实现二维	一个容器搞定

经验法则：

• 导航栏、按钮组、标签列表 → Flexbox
• 整体页面骨架、卡片网格、仪表盘 → Grid
• 简单的等分排列 → 都可以

边界

• Flexbox 是一维的，不要试图用它实现复杂的二维网格（用 Grid）
• flex-basis: 0 和 flex-basis: auto 的效果差异很大，注意区分
• align-items: stretch 是默认值，如果子元素设置了高度就不会拉伸
• gap 在 Flexbox 中可用，但老浏览器可能不支持
• flex-shrink 默认为 1，意味着空间不足时 item 会缩小，设为 0 可防止缩小

一句话记忆法

Flexbox 处理一维排列：justify-content 管主轴，align-items 管交叉轴，flex: 1 让元素均分空间。

Related notes

• CSS MOC
• css-grid
• CSS 居中布局