说说 Flexbox（弹性盒布局模型），以及适用场景

问题解析

Flexbox 是现代 CSS 布局的基石，它彻底改变了我们处理一维布局的方式。面试考察这个问题，是想要了解候选人是否掌握弹性布局的核心概念，以及能否灵活运用各种属性解决实际布局问题。

什么是 Flexbox

Flexbox（Flexible Box，弹性盒布局模型） 是一种一维布局方法，旨在提供一种更有效的方式来布置、对齐和分配容器中项目之间的空间，即使它们的大小未知或是动态的。

核心概念

• 容器（Flex Container）：声明了 display: flex 的元素
• 项目（Flex Item）：容器的直接子元素
• 主轴（Main Axis）：项目的排列方向（默认水平）
• 交叉轴（Cross Axis）：垂直于主轴的方向（默认垂直）

┌─────────────────────────────────┐
│  ←────── Main Axis ──────→     │
│                                 │
│  ┌────┐ ┌────┐ ┌────┐          │
│  │    │ │    │ │    │  ↑       │
│  │Item│ │Item│ │Item│ Cross     │
│  │ 1  │ │ 2  │ │ 3  │  Axis     │
│  │    │ │    │ │    │  ↓       │
│  └────┘ └────┘ └────┘          │
│                                 │
│     Flex Container              │
└─────────────────────────────────┘

容器属性

1. 定义 Flex 容器

.container {
  display: flex;           /* 块级弹性容器 */
  display: inline-flex;    /* 行内弹性容器 */
}

2. 主轴方向

.container {
  flex-direction: row;            /* 默认，水平从左到右 */
  flex-direction: row-reverse;    /* 水平从右到左 */
  flex-direction: column;         /* 垂直从上到下 */
  flex-direction: column-reverse; /* 垂直从下到上 */
}

3. 换行

.container {
  flex-wrap: nowrap;         /* 默认，不换行 */
  flex-wrap: wrap;           /* 换行 */
  flex-wrap: wrap-reverse;   /* 换行，第一行在下 */
}

4. 简写

.container {
  flex-flow: row wrap;       /* direction + wrap */
}

5. 主轴对齐

.container {
  justify-content: flex-start;     /* 默认，左对齐 */
  justify-content: flex-end;       /* 右对齐 */
  justify-content: center;         /* 居中 */
  justify-content: space-between;  /* 两端对齐，项目间隔相等 */
  justify-content: space-around;   /* 项目两侧间隔相等 */
  justify-content: space-evenly;   /* 所有间隔相等 */
}

6. 交叉轴对齐

.container {
  align-items: stretch;        /* 默认，拉伸填满 */
  align-items: flex-start;     /* 顶部对齐 */
  align-items: flex-end;       /* 底部对齐 */
  align-items: center;         /* 垂直居中 */
  align-items: baseline;       /* 文字基线对齐 */
}

7. 多行对齐

.container {
  align-content: stretch;        /* 默认，拉伸 */
  align-content: flex-start;     /* 顶部对齐 */
  align-content: flex-end;       /* 底部对齐 */
  align-content: center;         /* 居中 */
  align-content: space-between;  /* 两端对齐 */
  align-content: space-around;   /* 间隔相等 */
}

8. 间隙

.container {
  gap: 20px;                    /* 行列间隙相同 */
  row-gap: 20px;                /* 行间隙 */
  column-gap: 30px;             /* 列间隙 */
}

项目属性

1. 排序

.item {
  order: 1;            /* 默认 0，数值越小越靠前 */
}

2. 放大比例

.item {
  flex-grow: 0;        /* 默认 0，不放大 */
  flex-grow: 1;        /* 等分剩余空间 */
  flex-grow: 2;        /* 占据两份 */
}

3. 缩小比例

.item {
  flex-shrink: 1;      /* 默认 1，空间不足时缩小 */
  flex-shrink: 0;      /* 不缩小 */
}

4. 基础大小

.item {
  flex-basis: auto;    /* 默认，根据内容或 width */
  flex-basis: 200px;   /* 固定基础大小 */
  flex-basis: 0;       /* 忽略内容，按 flex-grow 分配 */
}

5. 简写

.item {
  /* flex: grow shrink basis */
  flex: 0 1 auto;      /* 默认 */
  flex: 1;             /* 1 1 0%，等分空间 */
  flex: auto;          /* 1 1 auto */
  flex: none;          /* 0 0 auto，固定大小 */
}

flex: 1 与 flex: auto 的区别：

• flex: 1 → flex: 1 1 0%：basis 为 0，按 grow 比例分配
• flex: auto → flex: 1 1 auto：basis 为 auto，先考虑内容大小

6. 单独对齐

.item {
  align-self: auto;         /* 默认，继承 align-items */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: stretch;
}

常见布局实现

水平垂直居中

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

两端对齐

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

底部固定

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;              /* 占据剩余空间 */
}

.footer {
  flex-shrink: 0;       /* 不缩小 */
}

自适应网格

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.grid-item {
  flex: 1 1 300px;      /* 可伸缩，基础 300px */
}

侧边栏 + 主内容

.layout {
  display: flex;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;       /* 侧边栏不缩小 */
}

.main {
  flex: 1;              /* 主内容自适应 */
  min-width: 0;         /* 防止内容溢出 */
}

深入理解

flex-grow 计算原理

<div class="container">
  <div class="item" style="flex-grow: 1;">A</div>
  <div class="item" style="flex-grow: 2;">B</div>
  <div class="item" style="flex-grow: 1;">C</div>
</div>

剩余空间 = 容器宽度 - 项目基础宽度总和

分配：

• A: 1/4 剩余空间
• B: 2/4 剩余空间
• C: 1/4 剩余空间

flex-shrink 计算原理

空间不足时，按 flex-shrink 比例缩小：

缩小比例 = (项目宽度 × flex-shrink) / 总和

min-width: 0 的重要性

Flex 项目默认有 min-width: auto，内容过长时不会缩小：

.main {
  flex: 1;
  min-width: 0;         /* 允许缩小，防止溢出 */
  overflow: hidden;
  text-overflow: ellipsis;
}

常见 Bug 和解决方案

/* 1. 间隙使用 gap，不要用 margin */
.container {
  gap: 20px;            /* 推荐 */
}

/* 2. 滚动容器需要设置高度 */
.scroll-container {
  display: flex;
  flex-direction: column;
  height: 100vh;        /* 必须有高度 */
  overflow-y: auto;
}

/* 3. 绝对定位子元素脱离 Flex 布局 */
.container {
  position: relative;
}

.absolute-item {
  position: absolute;   /* 不受 Flex 控制 */
}

适用场景

场景	示例
水平/垂直居中	弹窗、按钮内图标文字对齐
等高列	卡片列表
底部固定	Sticky Footer
导航栏	水平菜单、工具栏
分栏布局	侧边栏 + 主内容
表单对齐	标签 + 输入框
移动端适配	底部 Tab Bar

最佳实践

/* 1. 使用 gap 替代 margin */
.card-list {
  display: flex;
  gap: 20px;            /* 简洁，无需处理边距 */
}

/* 2. 响应式 Flex */
.responsive {
  display: flex;
  flex-wrap: wrap;
}

.responsive > * {
  flex: 1 1 200px;      /* 自适应换行 */
}

/* 3. 工具类 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }

/* 4. 回退方案 */
.container {
  display: block;
}

@supports (display: flex) {
  .container {
    display: flex;
  }
}

面试要点

1. 能够解释主轴和交叉轴的概念
2. 能够说出 justify-content 和 align-items 的区别
3. 理解 flex: 1 和 flex: auto 的区别
4. 知道 flex-shrink 和 flex-basis 的作用
5. 能够用 Flexbox 实现常见布局（居中、两栏、底部固定）
6. 了解 min-width: 0 在 Flex 布局中的重要性