跳到主要内容

Flex 布局：基础概念与使用方法

什么是 Flex 布局​

Flexbox（Flexible Box） 是 CSS3 提供的一维布局模型，擅长在一行或一列方向上分配空间、对齐元素。它解决了传统布局中垂直居中难、等高列、弹性伸缩等痛点。

核心术语：

  • Flex 容器（flex container）：设置了 display: flex 或 display: inline-flex 的元素
  • Flex 项目（flex item）：容器的直接子元素
  • 主轴（main axis）：由 flex-direction 决定的主排列方向
  • 交叉轴（cross axis）：垂直于主轴的方向

如何启用​

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

启用后：

  1. 容器成为 Flex 格式化上下文
  2. 直接子元素自动成为 Flex 项目
  3. 默认主轴为水平方向（row），项目从左到右排列、不换行

💡 只有直接子元素会成为 Flex 项目；更深层级的后代不受 Flex 容器直接影响。

默认行为一览​

属性默认值含义
flex-directionrow主轴水平，起点在左
flex-wrapnowrap不换行
justify-contentflex-start主轴起点对齐
align-itemsstretch交叉轴拉伸填满
align-contentstretch多行时交叉轴拉伸
项目 flex0 1 auto不放大、可缩小、基准为内容尺寸

基本使用示例​

水平排列 + 间距​

.nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

水平垂直居中​

.center-box {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center;     /* 交叉轴居中 */
  min-height: 200px;
}

两端对齐导航​

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

等分三列​

.row {
  display: flex;
  gap: 12px;
}
.row > * {
  flex: 1; /* 等价于 1 1 0% 的常见写法思路：均分剩余空间 */
}

更精确的等分推荐：

.row > * {
  flex: 1 1 0;
  min-width: 0; /* 防止内容撑破，见注意事项篇 */
}

适用场景​

适合用 Flex 的典型场景：

  • 导航栏、工具栏、按钮组
  • 卡片内图标 + 文字横向/纵向对齐
  • 垂直居中、底部贴齐等一维对齐
  • 侧边栏 + 内容区（简单两栏）
  • 表单行内标签与输入框对齐

不太适合单独用 Flex 的场景：

  • 复杂二维网格（行列同时精确定位）→ 优先 Grid
  • 杂志式不规则排版 → Grid / 多列布局

与传统布局的关系​

  • Flex 不替代所有定位；position、float 仍可用于特殊层叠/浮动需求
  • Flex 项目上的 float、clear、vertical-align 基本失效
  • 可用 margin: auto 在 Flex 中吸收剩余空间，实现灵活对齐

学习路径建议​

  1. 先掌握容器：flex-direction / justify-content / align-items / gap
  2. 再掌握项目：flex-grow / flex-shrink / flex-basis / align-self
  3. 理解 flex 简写与 min-width: auto 的默认行为
  4. 结合兼容性与注意事项做响应式实战

相关条目：

  • 《Flex 容器属性详解》
  • 《Flex 项目属性详解》
  • 《Flex 浏览器兼容性》
  • 《Flex 注意事项与常见坑》