CSS Flex 布局：属性、概念与实战 – wiki基地

---

CSS Flex 布局：属性、概念与实战全解析

在现代网页设计中，布局是构建页面的基石。从最初的表格布局、到后来的浮动（float）和定位（position），网页布局技术一直在演进，以适应更复杂的设计需求和多样化的设备屏幕。然而，这些传统方法在处理一些常见的布局场景时显得力不尽物，比如垂直居中、等高列、按比例分配空间等，往往需要繁琐的CSS或额外的HTML结构。

正是在这样的背景下，CSS Flexible Box Layout Module，通常被称为 Flexbox 或弹性布局，应运而生。Flexbox 是一种用于在一维空间中布局项目（items）的强大模型。它特别适合于构建应用程序的组件布局，以及处理小型布局中的对齐、分布和顺序问题。与依赖于浮动和定位不同，Flexbox 通过容器（Container）和项目（Item）的属性，提供了一种更加直观、灵活的方式来控制元素的排列、对齐和空间的分配。

本文将带你深入了解 Flexbox 的核心概念、属性，并通过实战案例掌握其应用。

1. Flexbox 的核心概念

理解 Flexbox 之前，需要先明确两个基本概念：

1. 弹性容器 (Flex Container): 任何设置了 display: flex; 或 display: inline-flex; 的元素都会成为弹性容器。它是所有弹性项目的父元素。
2. 弹性项目 (Flex Item): 弹性容器的所有直系子元素都会自动成为弹性项目。

Flexbox 布局的关键在于它引入了两个轴线：

• 主轴 (Main Axis): 弹性项目沿其排列的轴线。主轴的方向由弹性容器的 flex-direction 属性决定。
• 交叉轴 (Cross Axis): 与主轴垂直的轴线。交叉轴的方向也由主轴决定。

理解这两个轴线是掌握 Flexbox 对齐和分布属性的关键。例如，当你使用 justify-content 属性时，你是在沿主轴对齐项目；而使用 align-items 或 align-self 时，你是在沿交叉轴对齐项目。

(图片来源：CSS-Tricks)

2. 弹性容器 (Flex Container) 的属性

以下属性应用于弹性容器（即设置了 display: flex; 或 display: inline-flex; 的元素）：

2.1 display

• 作用: 定义一个元素是否为弹性容器。
• 可选值:
  • flex: 将元素设置为块级弹性容器。
  • inline-flex: 将元素设置为行内块级弹性容器。
• 示例:
  css
.container {
display: flex; /* 或者 display: inline-flex; */
}
  将一个 div 设置为 display: flex; 后，它的子元素（默认情况下）将在一行内排列，并且具有弹性特性。

2.2 flex-direction

• 作用: 决定主轴的方向，从而决定了弹性项目在容器中的排列方向。
• 可选值:
  • row: (默认值) 主轴为水平方向，起点在左端。项目从左到右排列。
  • row-reverse: 主轴为水平方向，起点在右端。项目从右到左排列。
  • column: 主轴为垂直方向，起点在上沿。项目从上到下排列。
  • column-reverse: 主轴为垂直方向，起点在下沿。项目从下到上排列。
• 示例:
  css
.container {
display: flex;
flex-direction: column; /* 项目垂直排列 */
}
flex-direction 决定了哪个轴是主轴。如果设置为 row 或 row-reverse，主轴是水平的；如果设置为 column 或 column-reverse，主轴是垂直的。

2.3 flex-wrap

• 作用: 定义弹性项目在容器主轴方向上是否换行。
• 可选值:
  • nowrap: (默认值) 不换行。如果所有项目超出容器宽度，它们将收缩（如果允许收缩）或者溢出。
  • wrap: 换行。当空间不足时，项目会换到新的一行（或列），从上到下排列新行。
  • wrap-reverse: 换行。当空间不足时，项目会换到新的一行（或列），从下到上排列新行。
• 示例:
  css
.container {
display: flex;
flex-wrap: wrap; /* 项目会在空间不足时换行 */
}
  当 flex-wrap 设置为 wrap 或 wrap-reverse 且有多行项目时，容器的 align-content 属性会生效。

2.4 flex-flow

• 作用: 这是 flex-direction 和 flex-wrap 的简写属性。
• 语法: flex-flow: <flex-direction> || <flex-wrap>; (顺序不重要)
• 示例:
  css
.container {
display: flex;
flex-flow: row wrap; /* 相当于 flex-direction: row; 和 flex-wrap: wrap; */
}
  同时设置方向和是否换行，更简洁。

2.5 justify-content

• 作用: 定义弹性项目在主轴上的对齐方式。它处理项目之间的和项目周围的空间分布。
• 可选值:
  • flex-start: (默认值) 项目紧靠主轴起点。
  • flex-end: 项目紧靠主轴终点。
  • center: 项目在主轴上居中。
  • space-between: 项目沿主轴均匀分布。第一个项目与主轴起点对齐，最后一个项目与主轴终点对齐。项目之间的间隔相等。
  • space-around: 项目沿主轴均匀分布。每个项目两侧的间隔相等。因此，项目之间的间隔比项目与容器边缘的间隔大一倍。
  • space-evenly: 项目沿主轴均匀分布。项目之间以及项目与容器边缘的间隔都相等。
• 示例:
  css
.container {
display: flex;
justify-content: center; /* 项目在主轴上居中 */
}
  如果 flex-direction 是 row，这个属性控制水平方向的对齐；如果 flex-direction 是 column，则控制垂直方向的对齐。

2.6 align-items

• 作用: 定义弹性项目在交叉轴上的对齐方式。它决定了当前行（或列）内所有项目如何相对于该行（或列）的交叉轴进行对齐。
• 可选值:
  • stretch: (默认值) 如果项目未设置高度（或宽度，取决于交叉轴方向）或设置为 auto，则拉伸以填充整个容器（当前行）的高度（或宽度）。
  • flex-start: 项目紧靠交叉轴起点。
  • flex-end: 项目紧靠交叉轴终点。
  • center: 项目在交叉轴上居中。
  • baseline: 项目根据它们的基线对齐。
• 示例:
  css
.container {
display: flex;
align-items: center; /* 项目在交叉轴上居中 */
}
  如果 flex-direction 是 row，交叉轴是垂直的，这个属性控制垂直对齐；如果 flex-direction 是 column，交叉轴是水平的，则控制水平对齐。注意，这个属性应用于所有弹性项目在各自行内的对齐。

2.7 align-content

• 作用: 定义多根轴线（即多行或多列）在交叉轴上的对齐方式。这个属性只有当容器有多行/多列项目（即 flex-wrap 设置为 wrap 或 wrap-reverse 且项目填满容器并换行）时才会生效。如果容器只有一根轴线（不换行或虽然设置了换行但项目未填满一行），该属性无效。
• 可选值:
  • stretch: (默认值) 轴线（多行/多列）拉伸以占用剩余空间。
  • flex-start: 多根轴线紧靠交叉轴起点。
  • flex-end: 多根轴线紧靠交叉轴终点。
  • center: 多根轴线在交叉轴上居中。
  • space-between: 多根轴线沿交叉轴均匀分布。第一根轴线与起点对齐，最后一根轴线与终点对齐。轴线之间的间隔相等。
  • space-around: 多根轴线沿交叉轴均匀分布。每根轴线两侧的间隔相等。
• 示例:
  css
.container {
display: flex;
flex-wrap: wrap; /* 必须换行才能生效 */
align-content: space-between; /* 多行项目在交叉轴上均匀分布 */
height: 300px; /* 通常需要容器有固定高度才能看出效果 */
}
align-items 是控制单行内项目如何沿交叉轴对齐，而 align-content 是控制多行本身如何沿交叉轴分布和对齐。

3. 弹性项目 (Flex Item) 的属性

以下属性应用于弹性项目的直系子元素：

3.1 order

• 作用: 定义弹性项目的排列顺序。数值越小，排列越靠前。默认值为 0。可以为负值。
• 示例:
  css
.item {
order: 1; /* 这个项目会排在 order 值为 0 的项目后面 */
}
.item:nth-child(1) {
order: 2; /* 第一个项目排到最后 */
}
.item:nth-child(2) {
order: 1; /* 第二个项目排在前面 */
}
order 只改变元素的视觉顺序，不改变其在DOM中的顺序。这会影响可访问性（如屏幕阅读器）和 Tab 键导航顺序，需要注意。

3.2 flex-grow

• 作用: 定义弹性项目的放大比例。当容器有剩余空间时，弹性项目会根据 flex-grow 的值按比例放大。
• 可选值: 非负数。默认值为 0，表示项目不会放大。
• 示例:
  css
.item-a {
flex-grow: 1; /* 如果有剩余空间，该项目将按比例放大 */
}
.item-b {
flex-grow: 2; /* 该项目将比 item-a 获得两倍的剩余空间 */
}
  如果所有项目的 flex-grow 都为 1，则它们将等分剩余空间。如果一个项目的 flex-grow 为 2，其他项目为 1，则该项目获得的剩余空间是其他项目的两倍。

3.3 flex-shrink

• 作用: 定义弹性项目的收缩比例。当容器空间不足时，弹性项目会根据 flex-shrink 的值按比例收缩。
• 可选值: 非负数。默认值为 1，表示项目会收缩。值为 0 表示项目不会收缩（即使空间不足也保持其 flex-basis 指定的大小，可能导致溢出）。
• 示例:
  css
.item-a {
flex-shrink: 0; /* 该项目不会收缩 */
}
.item-b {
flex-shrink: 1; /* 该项目会收缩 */
}
flex-shrink 的计算比 flex-grow 稍微复杂，它考虑到项目的初始大小。但基本原理是，flex-shrink 值越大的项目，收缩得越厉害。

3.4 flex-basis

• 作用: 定义弹性项目在分配剩余空间或收缩之前，沿主轴方向的初始大小。
• 可选值:
  • auto: (默认值) 项目的初始大小由其内容决定，或者如果内容未指定大小，则使用项目的主轴方向的 width 或 height 属性值。
  • content: 大小基于项目的内容。
  • percentage 或 length: 指定一个固定的长度值（如 200px）或相对于容器主轴大小的百分比值（如 50%）。
• 示例:
  css
.item {
flex-basis: 100px; /* 项目的初始大小是 100px */
}
.item-large {
flex-basis: 50%; /* 项目的初始大小是容器主轴大小的 50% */
}
flex-basis 设置的是项目在分配弹性空间之前的基准大小。

3.5 flex

• 作用: 这是 flex-grow, flex-shrink, 和 flex-basis 的简写属性。
• 语法: flex: <flex-grow> <flex-shrink> <flex-basis>;
• 可选值:
  • flex: none; 相当于 flex: 0 0 auto; (不放大，不收缩，大小由内容或 width/height 决定)
  • flex: auto; 相当于 flex: 1 1 auto; (放大，收缩，大小由内容或 width/height 决定)
  • flex: initial; 相当于 flex: 0 1 auto; (默认值) (不放大，收缩，大小由内容或 width/height 决定)
  • flex: 1; 相当于 flex: 1 1 0%; (放大，收缩，初始大小为 0，然后按比例分配空间) – 这是最常用的值之一，通常用于创建等宽列或占据剩余空间的列。
  • flex: <number>; 相当于 flex: <number> 1 0%; (只设置 flex-grow，flex-shrink 为 1，flex-basis 为 0%)
  • flex: <length> | <percentage>; 相当于 flex: 1 1 <length>|<percentage>; (只设置 flex-basis，flex-grow 和 flex-shrink 都为 1)
  • flex: <flex-grow> <flex-basis>; 相当于 flex: <flex-grow> 1 <flex-basis>; (设置 flex-grow 和 flex-basis，flex-shrink 为 1)
• 示例:
  css
.item-fill {
flex: 1; /* 填充剩余空间 */
}
.item-fixed {
flex: 0 0 200px; /* 固定宽度 200px，不放大不收缩 */
}
.item-expand {
flex: 2 1 auto; /* 放大比例为 2，收缩比例为 1，初始大小为 auto */
}
flex 属性是弹性项目最重要的属性之一，通过它可以方便地控制项目的弹性行为。

3.6 align-self

• 作用: 允许单个弹性项目有不同于其容器 align-items 属性的对齐方式。它可以覆盖容器的 align-items 设置。
• 可选值:
  • auto: (默认值) 继承父容器的 align-items 属性；如果没有父容器或者父容器没有设置 align-items，则为 stretch。
  • flex-start: 覆盖父容器的 align-items，使该项目紧靠交叉轴起点。
  • flex-end: 覆盖父容器的 align-items，使该项目紧靠交叉轴终点。
  • center: 覆盖父容器的 align-items，使该项目在交叉轴上居中。
  • baseline: 覆盖父容器的 align-items，使该项目根据其基线对齐。
  • stretch: 覆盖父容器的 align-items，使该项目拉伸以填充整个容器（当前行）的高度（或宽度）。
• 示例:
  css
.container {
display: flex;
align-items: center; /* 所有项目在交叉轴居中 */
}
.item-special {
align-self: flex-start; /* 但这个项目靠交叉轴起点对齐 */
}
align-self 提供了对单个项目的精细控制能力。

4. Flexbox 实战案例

理论结合实践，现在我们通过一些常见的布局场景来展示 Flexbox 的强大之处。

4.1 水平垂直居中

这曾是 CSS 布局中的一个难题，但使用 Flexbox 变得异常简单。

需求: 将一个子元素在父容器中完全水平垂直居中。

HTML:
“`html

“`

CSS:
“`css
.center-container {
display: flex; / 1. 设置父元素为弹性容器 /
justify-content: center; / 2. 项目在主轴上居中 (如果主轴是水平，就是水平居中) /
align-items: center; / 3. 项目在交叉轴上居中 (如果交叉轴是垂直，就是垂直居中) /
height: 300px; / 为了演示效果，给容器一个高度 /
border: 1px solid #ccc;
}

.centered-item {
/ flex items 默认不会占据全部宽度 /
/ 可以给item设置背景色方便观察 /
background-color: lightblue;
padding: 20px;
}
``
**解释:**
将父容器设置为display: flex;后，默认主轴是水平方向，交叉轴是垂直方向。justify-content: center;使项目沿主轴（水平）居中。align-items: center;使项目沿交叉轴（垂直）居中。
结合使用即可实现水平垂直居中。如果flex-direction设置为column，那么justify-content: center;将控制垂直居中，align-items: center;` 控制水平居中。

4.2 创建响应式导航栏

Flexbox 非常适合制作导航栏，特别是当你想让链接在不同屏幕尺寸下有不同的排列或换行行为时。

需求: 创建一个导航栏，在大屏幕下水平排列并均匀分布，在小屏幕下垂直排列。

HTML:
“`html

“`

CSS:
“`css
.navbar {
display: flex; / 1. 设置为弹性容器 /
list-style: none; / 移除列表默认样式（如果用 ul/li）/
padding: 0;
margin: 0;
background-color: #f0f0f0;
flex-wrap: wrap; / 2. 允许项目换行 /
justify-content: space-around; / 3. 在主轴上均匀分布项目 /
}

.navbar a {
display: block; / 确保链接是块级元素，方便设置内边距和边框 /
padding: 10px 15px;
text-decoration: none;
color: #333;
/ flex-grow: 1; / 可选：如果想让每个链接等宽，填充剩余空间 /
/ text-align: center; / 可选：链接内容居中 /
}

/ 响应式：在较小屏幕上垂直排列 /
@media (max-width: 600px) {
.navbar {
flex-direction: column; / 主轴变为垂直方向 /
align-items: stretch; / 项目沿交叉轴拉伸，占据全部宽度 /
justify-content: flex-start; / 垂直排列时靠顶部对齐 /
}

.navbar a {
/ 在垂直布局下，如果 items 拉伸，text-align 可以让文本居中 /
text-align: center;
border-bottom: 1px solid #ccc; / 添加分隔线 /
}
.navbar a:last-child {
border-bottom: none;
}
}
``
**解释:**
在大屏幕下 (min-width > 600px)，flex-direction默认是row(水平)。justify-content: space-around;使链接在水平方向上均匀分布。flex-wrap: wrap;允许项目在空间不足时换行。
在小屏幕下 (max-width <= 600px)，通过媒体查询改变flex-direction为column(垂直)。此时主轴变为垂直，交叉轴变为水平。align-items: stretch;使每个链接在水平方向上拉伸，占据导航栏的全部宽度。justify-content: flex-start;` 则控制垂直方向的对齐（垂直布局的主轴）。

4.3 构建带侧边栏的布局

Flexbox 可以轻松创建经典的两列或三列布局，并且很容易控制哪一部分占据剩余空间。

需求: 创建一个两列布局，左侧为固定宽度的侧边栏，右侧内容区域占据剩余空间。

HTML:
“`html

“`

CSS:
“`css
.layout-container {
display: flex; / 1. 设置为弹性容器 /
/ flex-direction: row; / 默认就是 row，可以省略 /
min-height: 300px; / 增加一个最小高度方便观察等高效果 */
border: 1px solid #ccc;
}

.sidebar {
flex: 0 0 200px; / 2. 侧边栏：不放大，不收缩，初始宽度 200px /
background-color: #f0f0f0;
padding: 20px;
}

.main-content {
flex: 1; / 3. 主内容区域：放大（占据剩余空间），允许收缩，初始大小为 auto 或 0% (flex: 1 1 0%) /
background-color: #ffffff;
padding: 20px;
}
``
**解释:**
将父容器设置为display: flex;。默认主轴水平，交叉轴垂直。
侧边栏.sidebar使用flex: 0 0 200px;。这表示：
*flex-grow: 0: 不会放大。
*flex-shrink: 0: 不会收缩。
*flex-basis: 200px: 初始宽度（在分配剩余空间前）是 200px。
主内容区域.main-content使用flex: 1;。这表示：
*flex-grow: 1: 会放大，占据所有剩余空间。
*flex-shrink: 1: 允许收缩。
*flex-basis: 0%(隐式值): 初始大小为 0，这样剩余空间就是容器总宽度减去侧边栏的宽度。
由于父容器的align-items默认是stretch`，侧边栏和主内容区域会沿交叉轴（垂直）拉伸，实现等高效果，即使其中一个内容较少。

4.4 底部固定在屏幕底部的布局

Flexbox 可以用于构建“圣杯布局”或简单的底部固定布局。

需求: 一个典型的页面结构：头部固定高度，内容区域可变高度并占据剩余空间，底部固定高度。

HTML:
“`html

头部区域

内容区域

“`

CSS:
“`css
html, body {
height: 100%; / 确保 html 和 body 至少占满视口高度 /
margin: 0;
padding: 0;
}

.page-layout {
display: flex; / 1. 设置 body 为弹性容器 /
flex-direction: column; / 2. 主轴设置为垂直方向 /
min-height: 100%; / 确保容器至少占满视口高度 /
}

header {
flex: 0 0 auto; / 3. 头部：不放大不收缩，高度由内容决定 /
background-color: lightgray;
padding: 10px;
text-align: center;
}

main {
flex: 1; / 4. 内容区域：放大，占据所有剩余空间 /
background-color: white;
padding: 20px;
overflow-y: auto; / 如果内容太多，内容区域可以滚动 /
}

footer {
flex: 0 0 auto; / 5. 底部：不放大不收缩，高度由内容决定 /
background-color: lightgray;
padding: 10px;
text-align: center;
}
``
**解释:**
将html和body的高度设置为 100%，并移除默认的margin和padding。
将body设置为display: flex;并将flex-direction设置为column。这样，子元素header,main,footer会垂直排列。
设置body的min-height为100%，确保它至少占满整个视口，即使内容很少。header和footer使用flex: 0 0 auto;，表示它们不会放大或收缩，其高度由自身内容决定。main使用flex: 1;，表示它会放大并占据header和footer` 之外的所有剩余空间。
这样就实现了头部和底部固定，内容区域填充剩余空间的布局，当内容区域不足以填满视口时，footer 会被“推”到底部。

5. 进阶与注意事项

• 浏览器兼容性: Flexbox 已经被广泛支持，但为了兼容一些老旧浏览器，可能需要使用浏览器前缀 (-webkit-, -ms-)。不过，现代开发中通常可以直接使用标准语法。可以使用 caniuse.com 查看详细兼容性信息。
• 开发者工具: 现代浏览器的开发者工具（如 Chrome DevTools）提供了强大的 Flexbox 调试功能，可以直观地看到弹性容器和项目的边界、轴线方向和对齐方式，这对于学习和调试 Flexbox 非常有帮助。
• 嵌套: Flexbox 容器的子元素是弹性项目，但弹性项目本身也可以设置为新的 Flexbox 容器，实现复杂的嵌套布局。
• 与传统布局的结合: Flexbox 主要用于一维布局，对于复杂的二维网格布局，CSS Grid Layout (栅格布局) 是更合适的选择。Flexbox 和 Grid 可以结合使用，Flexbox 处理组件内部的一维排列，Grid 处理页面整体的二维结构。
• Flex Item 的外边距 (margin): 在 Flexbox 中，弹性项目的 margin 是有效的，并且会自动合并（不像传统块级元素的垂直外边距）。auto margin 在 Flexbox 中有特殊作用，它可以用来填充剩余空间，比如实现项目靠边对齐或将某个项目“推开”。
  • 例如，在水平 Flex 容器中，给一个项目设置 margin-left: auto;，该项目会向右推到最远（如果有其他项目在它左边）；设置 margin-right: auto;，该项目会向左推到最远。结合使用 margin-left: auto; margin-right: auto; 可以使该项目在主轴上居中，这在 justify-content: center; 应用于整个容器不方便时很有用。

6. 总结

CSS Flexbox 是一种革命性的布局方式，它极大地简化了许多过去难以实现的布局任务，特别是关于对齐、分布和灵活调整尺寸的问题。通过理解弹性容器和弹性项目、主轴和交叉轴的概念，以及熟练运用容器和项目的各项属性，你可以轻松构建出强大、灵活且响应式的网页布局。

虽然 Flexbox 主要用于一维布局，但其灵活性使得它成为现代 CSS 布局不可或缺的一部分。掌握 Flexbox，你将能够更高效、更优雅地构建网页界面。

希望本文的详细介绍和实战案例能帮助你全面理解和应用 Flexbox。最佳的学习方法是不断实践，动手尝试不同的属性组合，观察效果，并借助开发者工具进行调试。

---