CSS Flex布局完整指南：常用属性、居中方案与响应式实战-速维云

CSS Flex 布局是现代前端开发里最常用的布局方式之一。它特别适合一维布局，也就是在横向或纵向上排列一组元素，比如导航菜单、按钮组、卡片列表、表单行、居中布局和移动端自适应模块。

很多布局问题以前需要浮动、定位、行内块甚至额外空标签才能解决，现在用 Flex 往往几行 CSS 就能完成。本文从容器和项目两个角度讲清 Flex 常用属性，再结合居中方案和响应式场景，帮助你真正理解怎么用。

基本概念

使用 Flex 时，外层元素叫 Flex 容器，子元素叫 Flex 项目。只要给父元素设置 display: flex，它的直接子元素就会按 Flex 规则排列。

.container {
  display: flex;
}

Flex 默认主轴是水平方向，项目会从左到右排列。理解主轴和交叉轴很重要，因为很多属性都是围绕这两个方向生效的。

主轴方向

flex-direction 用来设置主轴方向。常见值包括 row、row-reverse、column、column-reverse。

.container {
  display: flex;
  flex-direction: row;
}

row 表示横向排列，column 表示纵向排列。移动端布局中经常会在桌面端使用横向排列，在窄屏下改成纵向排列。

Flex 布局最适合处理一维排列、对齐、间距和简单响应式调整。

主轴对齐

justify-content 控制项目在主轴上的对齐方式。常用值包括 flex-start、center、flex-end、space-between、space-around、space-evenly。

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

如果主轴是横向，justify-content 就控制左右方向；如果主轴是纵向，它就控制上下方向。很多人记混属性，根本原因就是没有先判断主轴方向。

交叉轴对齐

align-items 控制项目在交叉轴上的对齐方式。常见值包括 stretch、flex-start、center、flex-end、baseline。

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

横向布局时，align-items: center 常用于垂直居中。纵向布局时，它则会控制水平方向对齐。判断方向后再选属性，Flex 会清楚很多。

换行控制

默认情况下，Flex 项目会尽量挤在一行里。如果希望空间不够时自动换行，可以设置 flex-wrap: wrap。

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

卡片列表、标签列表、图片列表经常需要换行。配合 gap 设置间距，比给每个子元素写 margin 更干净。

gap 间距

gap 可以设置 Flex 项目之间的间距。它比传统 margin 更直观，也不会轻易出现首尾多余间距。

.toolbar {
  display: flex;
  gap: 12px;
}

在按钮组、导航项、卡片列表中，优先考虑使用 gap。如果需要兼容非常旧的浏览器，再考虑 margin 方案。

项目伸缩

Flex 项目可以通过 flex 控制伸缩。常见写法是 flex: 1，表示项目可以占据剩余空间。

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex: 1;
}

上面的写法适合侧边栏加内容区布局。侧边栏固定 240 像素，内容区自动占据剩余宽度。flex 实际上是 flex-grow、flex-shrink、flex-basis 的简写。

单个项目对齐

如果只想调整某一个 Flex 项目的交叉轴对齐，可以使用 align-self。它会覆盖容器上的 align-items。

.special-item {
  align-self: flex-end;
}

这在表单行、卡片按钮、局部特殊元素中比较有用。但如果大量项目都需要单独调整，可能说明布局结构需要重新整理。

经典居中方案

Flex 最常见的用途之一就是水平垂直居中。只要父元素有明确高度，就可以使用下面的写法。

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

这里 justify-content 负责主轴居中，align-items 负责交叉轴居中。默认主轴为横向，所以它实现的是水平和垂直同时居中。

响应式布局

Flex 很适合响应式布局。比如桌面端左右两栏，移动端上下排列，可以通过媒体查询切换 flex-direction。

.layout {
  display: flex;
  gap: 24px;
}

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
}

这种写法适合文章页、产品详情页、表单页面和后台配置页。结构不变，只改变排列方向，维护成本比较低。

常见错误

第一种错误是分不清主轴和交叉轴，导致 justify-content 和 align-items 乱用。第二种错误是忘记设置换行，卡片在小屏幕被挤得很窄。第三种错误是所有宽度都写死，导致响应式失效。

还有一种常见误区是用 Flex 做所有布局。Flex 适合一维布局，如果页面需要同时控制行和列的二维网格，CSS Grid 往往更合适。

实践建议

使用 Flex 前，先判断元素是横向排还是纵向排，再确定主轴方向。然后根据主轴选择 justify-content，根据交叉轴选择 align-items，需要换行就加 flex-wrap，需要间距就加 gap。

如果只是导航、按钮组、表单行、卡片列表和简单两栏布局，Flex 通常是首选；如果是复杂页面网格、仪表盘布局或多行多列精确对齐，再考虑 Grid。把适用场景分清楚，Flex 会非常顺手。

文章版权归作者所有，未经允许请勿转载。

THE END

教程
# CSS # Flex布局 # 响应式布局

CSS Flex布局完整指南：常用属性、居中方案与响应式实战