CSS Flexbox指南

Flexbox 是一种用于一维布局的 CSS 弹性盒子模型，通过设置容器为 display: flex 来实现子元素的自动调整；1. 容器使用 display: flex 定义弹性布局；2. flex-direction 设置主轴方向；3. justify-content 控制主轴对齐；4. align-items 控制交叉轴对齐；5. flex-wrap 决定是否换行；6. align-content 管理多行对齐；项目可使用 flex-grow、flex-shrink、flex-basis 调整大小，或通过 flex 简写统一设置，align-self 实现单独对齐；常见应用包括居中、导航栏、等高列和圣杯布局，配合 min-width: 0 和媒体查询可解决溢出与响应式问题，该模型兼容性良好且易于掌握。

CSS Flexbox 是一种强大的布局模型，特别适合在页面上对齐、分布和调整元素的大小。它让响应式设计变得更简单，尤其适用于一维布局（行或列）。下面是一个实用的 Flexbox 指南，帮你快速掌握核心概念和常用技巧。

什么是 Flexbox？

Flexbox（弹性盒子布局）是一种 CSS 布局方式，通过设置容器为 display: flex，可以让子元素自动调整大小和位置，以适应可用空间。

它主要由两个部分组成：

• 容器（Flex Container）：应用 display: flex 的父元素。
• 项目（Flex Items）：容器内的直接子元素。

容器上的常用属性

1. display: flex

开启 Flexbox 布局。

.container {
  display: flex;
}

注意：display: flex 使容器成为块级弹性容器，display: inline-flex 则为行内弹性容器。

2. flex-direction

定义主轴方向（项目排列方向）。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：从左到右
• column：从上到下

3. justify-content

在主轴上对齐项目。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• center：居中
• space-between：两端对齐，中间间距相等
• space-around：每个项目周围空间相等

4. align-items

在交叉轴上对齐项目（垂直方向，当主轴是横向时）。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• center：垂直居中
• stretch（默认）：拉伸填满容器（除非项目设置了高度）

5. flex-wrap

控制是否换行。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• wrap：允许换行
• wrap-reverse：反向换行（从下往上）

6. align-content

当有多行时，控制行与行之间的对齐方式（需启用 flex-wrap: wrap）。

.container {
  align-content: stretch | center | flex-start | flex-end | space-between | space-around;
}

项目上的常用属性

1. flex-grow

定义项目的放大比例（默认为 0，不放大）。

.item {
  flex-grow: 1; /* 占据剩余空间 */
}

2. flex-shrink

定义项目的缩小比例（默认为 1，空间不足时会缩小）。

.item {
  flex-shrink: 0; /* 禁止缩小 */
}

3. flex-basis

设置项目在分配多余空间前的初始大小。

.item {
  flex-basis: 100px; /* 基础宽度为 100px */
}

可以设为 auto（根据内容）或具体值（如 20%、150px）。

4. flex（简写）

flex-grow、flex-shrink 和 flex-basis 的简写。

.item {
  flex: 1;      /* 等价于 flex: 1 1 0% */
  flex: 0 1 auto; /* 默认值 */
  flex: 2 1 150px;
}

推荐使用简写形式，更简洁。

5. align-self

允许单个项目覆盖 align-items 的对齐方式。

.item {
  align-self: center; /* 单独居中 */
}

常见布局示例

1. 水平垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

一行代码实现居中，比传统方法简单得多。

2. 导航栏（两端对齐）

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

3. 等高列布局

.row {
  display: flex;
}
.column {
  flex: 1;
  margin: 10px;
}

所有列高度自动一致，无需设置固定高度。

4. 圣杯布局（头部、内容、尾部）

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

.header, .footer {
  flex: 0 0 auto;
  height: 60px;
}

.main {
  flex: 1;
  background: #f0f0f0;
}

主内容自动填满剩余空间。

实用技巧和注意事项

• 避免在 flex 项目上设置 width: 100%：可能会导致布局异常，特别是当 flex-basis 或 flex-grow 起作用时。
• min-width: 0 修复溢出问题：如果 flex 项目内有长文本或固定元素，可能溢出容器。添加 min-width: 0 可让项目正常收缩。
• 响应式结合媒体查询：用 flex-direction: column 在小屏幕上堆叠元素。

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

基本上就这些核心内容。Flexbox 不复杂，但非常实用。多练习几个布局（比如卡片、导航、表单），很快就能熟练掌握。

别忘了浏览器支持良好（IE10 ），可以放心使用。

以上是CSS Flexbox指南的详细内容。更多信息请关注PHP中文网其他相关文章！