CSS 弹性盒子（Flex）布局详解

作者：admin

来源：lanyunwork

时间：2025-10-31

弹性盒子布局概述

CSS 弹性盒子布局（Flexible Box Layout，简称 Flex）是一种一维布局模型，旨在为容器中的项目提供更有效的排列、对齐和空间分配方式。弹性布局能够自动调整子元素的大小和位置，以适应不同屏幕尺寸和设备。

弹性容器属性

display

定义容器为弹性容器

css

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

flex-direction

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

css

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

flex-wrap

定义项目是否换行

css

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

flex-flow

flex-direction 和 flex-wrap 的简写形式

css

.container {
  flex-flow: <flex-direction> <flex-wrap>;
}

justify-content

定义项目在主轴上的对齐方式

css

.container {
  justify-content: flex-start; /* 默认值，起始位置对齐 */
  justify-content: flex-end; /* 结束位置对齐 */
  justify-content: center; /* 居中对齐 */
  justify-content: space-between; /* 两端对齐，项目间间隔相等 */
  justify-content: space-around; /* 每个项目两侧间隔相等 */
  justify-content: space-evenly; /* 项目间和两端间隔完全相等 */
}

align-items

定义项目在交叉轴上的对齐方式

css

.container {
  align-items: stretch; /* 默认值，拉伸填满容器高度 */
  align-items: flex-start; /* 交叉轴起始位置对齐 */
  align-items: flex-end; /* 交叉轴结束位置对齐 */
  align-items: center; /* 交叉轴居中对齐 */
  align-items: baseline; /* 项目的第一行文字基线对齐 */
}

align-content

定义多根轴线的对齐方式（只有一行时无效）

css

.container {
  align-content: stretch; /* 默认值，轴线占满整个交叉轴 */
  align-content: flex-start; /* 交叉轴起始位置对齐 */
  align-content: flex-end; /* 交叉轴结束位置对齐 */
  align-content: center; /* 交叉轴居中对齐 */
  align-content: space-between; /* 两端对齐，轴线间间隔相等 */
  align-content: space-around; /* 每根轴线两侧间隔相等 */
}

弹性项目属性

order

定义项目的排列顺序

css

.item {
  order: <integer>; /* 数值越小，排列越靠前，默认为0 */
}

flex-grow

定义项目的放大比例

css

.item {
  flex-grow: <number>; /* 默认为0，即不放大 */
}

flex-shrink

定义项目的缩小比例

css

.item {
  flex-shrink: <number>; /* 默认为1，即空间不足时缩小 */
}

flex-basis

定义项目在分配多余空间之前的主轴尺寸

css

.item {
  flex-basis: <length> | auto; /* 默认为auto */
}

flex

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

css

.item {
  flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}
/* 常用值 */
flex: 0 1 auto; /* 默认值 */
flex: auto; /* 1 1 auto */
flex: none; /* 0 0 auto */
flex: 1; /* 1 1 0% */

align-self

允许单个项目有与其他项目不同的对齐方式

css

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

总结

弹性盒子布局通过简洁的属性设置，实现了强大的布局控制能力。容器属性控制整体布局方向、换行和对齐方式，而项目属性则允许对单个元素进行精细调整。这种布局方式特别适合构建响应式界面和组件级别的布局需求。

网站搭建用哪个

CSS Grid 布局详解