CSS Flex 布局入门：概念、用法与示例

太微2025-04-08前端CSS Flexbox 布局

CSS Flex 布局入门：概念、用法与示例

Flex（弹性布局） 是 CSS3 引入的一种一维布局模型，用来在容器内沿主轴分配空间、对齐子项。适合导航栏、卡片列表、居中表单等场景。

核心概念

概念	说明
Flex 容器	设置 `display: flex` 或 `display: inline-flex` 的元素
Flex 项目	容器直接子元素，自动成为 flex 项
主轴（main axis）	默认水平向右，由 `flex-direction` 决定
交叉轴（cross axis）	与主轴垂直的方向

在容器上常用的属性

1. `flex-direction` — 主轴方向

.container {
  display: flex;
  flex-direction: row;           /* 默认：水平，起点在左 */
  /* flex-direction: row-reverse; */  /* 水平反向 */
  /* flex-direction: column; */       /* 垂直，从上到下 */
  /* flex-direction: column-reverse; */
}

2. `flex-wrap` — 是否换行

.container {
  flex-wrap: nowrap;   /* 默认不换行，可能溢出 */
  /* flex-wrap: wrap; */   /* 空间不够时换行 */
  /* flex-wrap: wrap-reverse; */
}

3. `justify-content` — 主轴对齐

.container {
  justify-content: flex-start;    /* 默认：靠起点 */
  /* justify-content: flex-end; */     /* 靠终点 */
  /* justify-content: center; */       /* 居中 */
  /* justify-content: space-between; */ /* 两端贴边，中间均分 */
  /* justify-content: space-around; */  /* 两侧留白为中间一半 */
  /* justify-content: space-evenly; */   /* 空白完全均分 */
}

4. `align-items` — 交叉轴单行对齐

.container {
  align-items: stretch;    /* 默认：拉伸占满交叉轴 */
  /* align-items: flex-start; */
  /* align-items: flex-end; */
  /* align-items: center; */
  /* align-items: baseline; */
}

5. `align-content` — 多行时在交叉轴上分配（需 `flex-wrap: wrap`）

.container {
  flex-wrap: wrap;
  align-content: flex-start;    /* 多行整体靠上/靠左等 */
  /* align-content: center; */
  /* align-content: space-between; */
}

6. `gap` — 项目之间的间距

.container {
  gap: 12px;              /* 行列统一间距 */
  /* row-gap: 8px; column-gap: 16px; */
}

在项目上的常用属性

1. `flex-grow` — 放大比例

.item {
  flex-grow: 0;   /* 默认不放大 */
}
.item-main {
  flex-grow: 1;   /* 剩余空间按比例分给该元素 */
}

2. `flex-shrink` — 缩小比例

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

3. `flex-basis` — 分配空间前的初始尺寸

.item {
  flex-basis: auto;   /* 默认按 width/height 或内容 */
  flex-basis: 200px;
}

4. `flex` — 简写

/* flex: <grow> <shrink> <basis> */
.item {
  flex: 1;              /* 常见：flex: 1 1 0% 的简写习惯，等价于均分 */
  flex: 0 0 120px;      /* 固定 120px，不伸缩 */
}

5. `align-self` — 单独覆盖交叉轴对齐

.item {
  align-self: center;   /* 仅该项在交叉轴上居中 */
}

示例一：水平导航栏

<nav class="nav">
  <a href="#">首页</a>
  <a href="#">文章</a>
  <a href="#">关于</a>
</nav>

.nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
}

示例二：卡片垂直居中

<div class="card-wrap">
  <div class="card">内容</div>
</div>

.card-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 240px;
}

示例三：底部固定栏 + 中间自适应

典型「顶栏固定、中间滚动、底栏固定」可用 列方向 flex + flex: 1：

<div class="page">
  <header class="page-header">header</header>
  <main class="page-main">main 区域自动占满剩余高度</main>
  <footer class="page-footer">footer</footer>
</div>

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

示例四：响应式换行

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.grid > * {
  flex: 1 1 200px;   /* 基础 200px，可伸缩，可换行 */
}

小结

一维排布用 Flex，二维网格用 Grid（可同时学，场景不同）。
先定 主轴方向（flex-direction），再用 justify-content / align-items 对齐。
需要「占满剩余空间」时，给子项 flex: 1 或配合 flex-grow。
现代布局里 gap 比手动加 margin 更省事。

浏览器兼容性：Flex 在现代浏览器中已广泛支持；若需兼容极老环境，可查阅 Can I useopen in new window 做渐进增强。

CSS Flex 布局入门：概念、用法与示例

ON THIS PAGE