Flexbox介绍与入门指南 – wiki基地

---

深度解析CSS Flexbox：现代网页布局的利器——入门与实战指南

在现代网页设计中，布局一直是前端开发者面临的核心挑战之一。从早期的表格（<table>）布局，到后来的浮动（float）和定位（position），再到如今的弹性盒子（Flexbox）和网格（Grid），CSS 布局技术一直在不断演进，以适应更复杂、更灵活、更响应式的设计需求。

在这其中，Flexbox（全称 Flexible Box Layout Module）无疑是近些年最受欢迎的布局模型之一。它专门为解决容器内项目的一维布局问题而生，无论是沿着水平方向（行）还是垂直方向（列），都能轻松实现项目的对齐、分布和空间的动态调整。本文将带你深入理解 Flexbox 的核心概念、属性，并通过丰富的示例，帮助你从入门到熟练掌握这一强大的布局工具。

一、告别传统布局的痛点：为什么选择 Flexbox？

在 Flexbox 出现之前，我们主要依赖以下几种方式进行布局：

1. 表格布局 (<table>)：虽然能实现二维布局，但它本用于展示结构化数据，语义化差，对 SEO 不友好，且难以实现响应式设计。
2. 浮动布局 (float)：常用于实现多列布局，但需要清除浮动（Clearfix），容易导致父元素高度塌陷，且对垂直方向的对齐支持不好。
3. 定位布局 (position)：适用于特定元素的精确定位，但不适合整个页面或大块区域的整体布局。
4. 行内块布局 (display: inline-block)：可以将元素变为行内块，方便在一行内排列，但元素之间会有间隙，且垂直对齐相对麻烦。

这些传统方法在处理一些常见的布局任务时显得力不从心，比如：

• 在一个容器中垂直居中一个元素。
• 让容器内的项目等分布局，无论项目宽度如何。
• 创建一个根据可用空间自动伸缩的导航栏。
• 改变项目的视觉顺序，而不改变 HTML 结构。
• 让多列布局中的所有列拥有等高的背景。

Flexbox 的出现，为这些难题提供了一站式、直观且强大的解决方案。它的核心理念是将容器内的项目视为具有弹性的盒子，可以根据容器的尺寸和可用空间自动调整大小和位置。

二、Flexbox 的核心概念：容器与项目，主轴与交叉轴

理解 Flexbox，首先要掌握其两大基本概念：

1. Flex 容器 (Flex Container)：这是应用 Flexbox 布局的父元素。通过将父元素的 display 属性设置为 flex 或 inline-flex 来创建 Flex 容器。
2. Flex 项目 (Flex Items)：这是 Flex 容器的直接子元素。Flexbox 布局只会作用于这些直接子元素。

Flexbox 布局是基于“轴”的。Flex 容器内有两条轴：

• 主轴 (Main Axis)：由 flex-direction 属性定义，它可以是水平方向（默认，row）或垂直方向（column）。项目沿主轴方向排列。
• 交叉轴 (Cross Axis)：与主轴垂直的轴。如果主轴是水平的，交叉轴就是垂直的；如果主轴是垂直的，交叉轴就是水平的。

理解这两条轴及其起点和终点（main-start, main-end, cross-start, cross-end），对于掌握 Flexbox 中项目的对齐和分布至关重要。

设置 Flex 容器

要启用 Flexbox 布局，只需在父元素上添加：

css
.container {
display: flex; /* 或 inline-flex */
}

• display: flex;：容器本身以块级方式显示，其内部项目使用 Flexbox 布局。
• display: inline-flex;：容器本身以行内块方式显示，其内部项目使用 Flexbox 布局。

一旦一个元素设置为 Flex 容器，其直接子元素将自动成为 Flex 项目，并且一些默认行为会被应用：

• 项目默认沿主轴（row，水平方向）排列。
• 项目默认不换行（nowrap）。
• 项目默认宽度和高度会根据内容调整，但会尝试填满交叉轴（align-items: stretch 的默认值）。
• 项目默认不能伸长（flex-grow: 0），但可以收缩（flex-shrink: 1），基础大小为 auto（flex-basis: auto）。

接下来，我们将详细介绍作用于 Flex 容器和 Flex 项目的各种属性。

三、Flex 容器的属性 (Properties for the Flex Container)

这些属性应用于设置了 display: flex; 或 display: inline-flex; 的父元素，用来控制其内部 Flex 项目的整体布局。

1. flex-direction

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

• row (默认值): 主轴为水平方向，起点在左端，项目从左到右排列。
• row-reverse: 主轴为水平方向，起点在右端，项目从右到左排列。
• column: 主轴为垂直方向，起点在上沿，项目从上到下排列。
• column-reverse: 主轴为垂直方向，起点在下沿，项目从下到上排列。

css
.container {
display: flex;
flex-direction: row; /* 项目从左到右排列 */
/* flex-direction: column; /* 项目从上到下排列 */
}

理解 flex-direction 至关重要，因为它决定了主轴和交叉轴的方向，从而影响后续 justify-content 和 align-items 的作用。

2. flex-wrap

定义如果项目在一行/列放不下时，是否换行。

• nowrap (默认值): 不换行。项目会被压缩以适应容器。
• wrap: 换行。当一行/列放不下时，项目会换到新的一行/列，并在交叉轴方向上排列。
• wrap-reverse: 反向换行。行为类似 wrap，但新的一行/列会排列在交叉轴的另一侧。

css
.container {
display: flex;
flex-wrap: wrap; /* 空间不足时换行 */
}

当设置了 flex-wrap: wrap; 并且产生了多行/列时，align-content 属性将发挥作用。

3. 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; */
}

4. justify-content

定义项目在主轴上的对齐方式和空间分布。这是 Flexbox 中最常用的属性之一，用于控制项目之间的间隔。

• flex-start (默认值): 项目与主轴的起点对齐。
• flex-end: 项目与主轴的终点对齐。
• center: 项目在主轴上居中。
• space-between: 项目沿主轴均匀分布，第一个项目与起点对齐，最后一个项目与终点对齐。项目之间的间隔相等。
• space-around: 项目沿主轴均匀分布，每个项目两侧的间隔相等。因此，项目之间的间隔比项目与容器边缘的间隔大一倍。
• space-evenly: 项目沿主轴均匀分布，项目之间以及项目与容器边缘的间隔都相等。

css
.container {
display: flex;
justify-content: center; /* 项目在主轴上居中 */
/* justify-content: space-between; /* 项目沿主轴两端对齐，中间等分 */
}

例如，如果 flex-direction: row;，justify-content: center; 会使项目在水平方向居中；如果 flex-direction: column;，justify-content: center; 会使项目在垂直方向居中。

5. align-items

定义项目在交叉轴上的对齐方式。这个属性适用于容器内的所有项目，控制它们在单根交叉轴上的对齐。

• stretch (默认值): 如果项目未设置高度（或宽度，取决于交叉轴方向）或设为 auto，项目将拉伸以填满整个容器的交叉轴空间。
• flex-start: 项目与交叉轴的起点对齐。
• flex-end: 项目与交叉轴的终点对齐。
• center: 项目在交叉轴上居中。
• baseline: 项目根据其内容的基线对齐。

css
.container {
display: flex;
align-items: center; /* 项目在交叉轴上居中（例如：水平主轴时垂直居中）*/
/* align-items: stretch; /* 项目拉伸填满交叉轴空间 */
}

如果 flex-direction: row;，align-items: center; 会使项目在垂直方向居中；如果 flex-direction: column;，align-items: center; 会使项目在水平方向居中。

6. align-content

定义当容器有多行/列（即 flex-wrap: wrap; 且空间不足发生换行）时，这些行/列在交叉轴上的对齐方式和空间分布。这个属性类似 justify-content，但作用于交叉轴上的多行/列，而不是主轴上的项目。

• stretch (默认值): 各行/列拉伸以填满容器的交叉轴空间。
• flex-start: 各行/列与交叉轴的起点对齐。
• flex-end: 各行/列与交叉轴的终点对齐。
• center: 各行/列在交叉轴上居中。
• space-between: 各行/列沿交叉轴均匀分布，第一行/列与起点对齐，最后一行/列与终点对齐。
• space-around: 各行/列沿交叉轴均匀分布，每行/列两侧的间隔相等。

注意： 如果只有一行/列 Flex 项目，align-content 属性将不起作用。它只在 flex-wrap: wrap; 且有多行/列的情况下有效。

css
.container {
display: flex;
flex-wrap: wrap; /* 必须设置换行 */
align-content: space-around; /* 多行/列在交叉轴上等间距分布 */
}

四、Flex 项目的属性 (Properties for the Flex Items)

这些属性应用于 Flex 容器的直接子元素，用来控制它们在容器内的具体行为。

1. order

定义项目的排列顺序。默认值为 0。数值越小，排列越靠前。可以为负值。这个属性只影响项目的视觉顺序，不影响其在 HTML 结构中的顺序（对读屏器等辅助技术很重要）。

“`css
.item {
order: 1; / 这个项目会排在 order 值为 0 的项目后面 /
}

.item:nth-child(2) {
order: -1; / 这个项目会排在 order 值为 0 或 1 的项目前面 /
}
“`

2. flex-grow

定义项目的放大比例。默认值为 0 (即如果有多余空间，项目不会放大)。当容器有多余空间时，如果所有项目的 flex-grow 都为 1，它们将等分剩余空间；如果一个项目的 flex-grow 为 2，其他项目为 1，那么前者将占据剩余空间的两份，后者各占据一份。

• 数值表示放大的相对比例。

“`css
.item {
flex-grow: 1; / 这个项目会根据剩余空间按比例放大 /
}

.item-special {
flex-grow: 2; / 这个项目放大的比例是其他 flex-grow: 1 的项目的两倍 /
}
“`

只有当容器在主轴方向上有剩余空间时，flex-grow 才会生效。

3. flex-shrink

定义项目的缩小比例。默认值为 1 (即如果空间不足，项目会等比例缩小)。如果设置为 0，则项目不会缩小，即使空间不足也保持其原始大小（或者由 flex-basis / width / height 指定的大小），这可能导致项目溢出容器。

• 数值表示缩小的相对比例。

“`css
.item {
flex-shrink: 1; / 默认值，允许项目缩小 /
}

.item-fixed-width {
flex-shrink: 0; / 防止项目缩小 /
}
“`

只有当容器在主轴方向上空间不足时，flex-shrink 才会生效。

4. flex-basis

定义在分配多余空间之前，项目占据的主轴空间（基础大小）。默认值为 auto。它可以是一个长度值（如 200px）或百分比（如 50%），也可以是关键字 auto 或 content。

• 当设置为 auto 时，项目的基础大小取自其 width 或 height 属性。如果未设置 width 或 height，则取自内容本身的大小。
• 当设置为一个固定值时，项目的基础大小就是该固定值，无论 width 或 height 如何设置（除非 width/height 设置了 important 或 max-width/max-height 限制）。
• content 关键字表示根据项目内容计算其大小。

“`css
.item {
flex-basis: 100px; / 项目的基础大小是 100px /
}

.item-auto {
flex-basis: auto; / 项目基础大小取决于其 width/height 或内容 /
}
“`

flex-basis 决定了分配剩余空间时的“基准”大小。在计算剩余空间时，会先减去所有项目的 flex-basis 大小。

5. flex

这是 flex-grow, flex-shrink, 和 flex-basis 的简写属性。默认值为 0 1 auto。

• flex: <'flex-grow'> <'flex-shrink'>? <'flex-basis'>?

常用的一些简写值：

• flex: auto;： 等同于 1 1 auto。项目会根据可用空间自动伸缩，但会考虑内容大小。
• flex: none;： 等同于 0 0 auto。项目既不伸缩也不收缩，保持其由 width/height 或内容决定的原始大小。
• flex: 0 auto;： 等同于 0 1 auto (默认值)。项目允许收缩但不会放大，基础大小为 auto。
• flex: 1;： 等同于 1 1 0%。这是一个非常常用的值，表示项目可以伸缩，且基础大小为 0。这意味着所有设置了 flex: 1; 的项目将等分所有可用空间（无论它们原始内容多大，除非内容大小超过了分配的空间）。

“`css
.item {
flex: 1; / 项目可以伸缩，等分可用空间 /
}

.item-fixed {
flex: 0 0 200px; / 项目不伸缩，基础大小固定为 200px /
}
“`

掌握 flex 简写属性可以大大简化 CSS 代码，尤其是在处理伸缩布局时。理解 flex: 1 (1 1 0%) 和 flex: auto (1 1 auto) 的区别很重要：前者倾向于等分空间，后者会更多考虑内容大小。

6. align-self

允许单个项目有与其他项目不一样的交叉轴对齐方式。它会覆盖容器的 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则相当于 stretch。

• 值与 align-items 相同：auto (默认), flex-start, flex-end, center, baseline, stretch.

css
.item {
align-self: center; /* 这个项目在交叉轴上居中，覆盖了父容器的 align-items 设置 */
}

这个属性非常方便，例如在垂直居中一个块状布局时，可以将父容器设置为 display: flex; align-items: center;，如果某个子项需要顶部对齐，只需给它加上 align-self: flex-start;。

五、Flexbox 实践：常见布局示例

理论知识扎实后，我们来看看如何用 Flexbox 解决一些常见的布局问题。

1. 垂直居中一个块元素

这是 Flexbox 最经典的应用之一。

HTML:

“`html

“`

CSS:

“`css
.container-center {
display: flex;
justify-content: center; / 主轴居中 /
align-items: center; / 交叉轴居中 /
height: 300px; / 容器需要有高度 /
border: 1px solid #ccc;
}

.item-center {
width: 150px;
height: 100px;
background-color: lightblue;
}
“`

在这个例子中，父容器是 Flex 容器，主轴默认是水平的。justify-content: center; 使子项在水平方向居中。align-items: center; 使子项在垂直方向（交叉轴）居中。如果 flex-direction 设置为 column，则 justify-content 控制垂直居中，align-items 控制水平居中。

另一种居中单个项目的方式是利用 margin: auto;：

HTML:

“`html

“`

CSS:

“`css
.container-center-margin {
display: flex;
height: 300px; / 容器需要有高度 /
border: 1px solid #ccc;
}

.item-center-margin {
margin: auto; / 神奇的 margin: auto; 在 flex 项目中能同时实现主轴和交叉轴的居中 /
width: 150px;
height: 100px;
background-color: lightgreen;
}
``
当 Flex 项目设置margin: auto;时，它会尝试占据所有可用空间来填充其外边距。如果主轴和交叉轴方向都有可用空间，margin: auto;` 就会在这两个方向上生效，从而实现完美的居中。

2. 创建等宽的多列布局

让多个项目等分容器的宽度。

HTML:

“`html

“`

CSS:

“`css
.container-equal-width {
display: flex;
border: 1px solid #ccc;
}

.item {
flex: 1; / 等同于 flex-grow: 1, flex-shrink: 1, flex-basis: 0% /
text-align: center;
padding: 20px;
border: 1px solid #ddd; / 用于区分 /
box-sizing: border-box; / 确保 padding 和 border 不增加总宽度 /
}
“`

这里，flex: 1; 是关键。它告诉浏览器，每个项目都可以放大和缩小，并且它们的基础大小为 0。这意味着所有设置了 flex: 1; 的项目将等分 Flex 容器在主轴上的所有可用空间。如果容器有 300px 剩余空间，每个项目就会获得 100px 的额外宽度。

3. 创建圣杯布局（头部、脚部、内容区，内容区包含侧边栏和主区域）的简化版

Flexbox 非常适合处理这种一维（行或列）的结构。对于更复杂的二维布局，Grid 更合适，但 Flexbox 也能实现基础版本。

HTML:

“`html

“`

CSS:

“`css
.holy-grail-container {
display: flex;
flex-direction: column; / 容器的主轴是垂直方向 /
min-height: 100vh; / 让容器至少填满视口高度 /
}

header, footer {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
/ Flex 项目默认 flex-shrink: 1，flex-grow: 0, flex-basis: auto /
/ 所以 header 和 footer 不会拉伸，但可以收缩 /
}

.main-content {
display: flex; / 内容区成为新的 Flex 容器 /
flex-grow: 1; / 让内容区拉伸填满父容器的剩余垂直空间 /
}

aside {
width: 200px; / 固定侧边栏宽度 /
background-color: #e0e0e0;
padding: 20px;
flex-shrink: 0; / 防止侧边栏收缩 /
}

main {
flex-grow: 1; / 让主区域拉伸填满剩余的水平空间 /
background-color: #ffffff;
padding: 20px;
}
“`

在这个例子中：
* 最外层容器设置为 display: flex; flex-direction: column;，使得 header, main-content, footer 垂直排列。
* main-content 设置 flex-grow: 1;，使其占据容器的剩余垂直空间（即 100vh 减去 header 和 footer 的高度）。
* main-content 自身也设置为 display: flex;，使其内部的 aside 和 main 水平排列（默认 row）。
* aside 设置固定宽度并 flex-shrink: 0; 防止其缩小。
* main 设置 flex-grow: 1;，使其占据 main-content 的剩余水平空间（即 main-content 的总宽度减去 aside 的宽度）。

这是一个经典的 Flexbox 组合应用，通过嵌套 Flex 容器来构建更复杂的布局。

4. 创建一个粘性页脚（Sticky Footer）

让页脚始终位于页面底部，如果内容不足以填满视口，页脚紧贴视口底部；如果内容溢出视口，页脚在内容下方。

HTML:

“`html

“`

CSS:

“`css
.sticky-footer-container {
display: flex;
flex-direction: column;
min-height: 100vh; / 确保容器至少和视口一样高 /
}

header, footer {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
/ Flex 项目默认设置，不会放大 /
}

main {
flex-grow: 1; / 让主内容区占据所有剩余的垂直空间 /
background-color: #ffffff;
padding: 20px;
}
``
原理与圣杯布局类似，将容器设为 Flex Column，让主内容区flex-grow: 1`，使其吸收所有剩余垂直空间，从而将页脚推到底部。

六、Flexbox 的默认值和兼容性

默认值概览：

应用于 Flex 容器的默认值：
* flex-direction: row;
* flex-wrap: nowrap;
* flex-flow: row nowrap;
* justify-content: flex-start;
* align-items: stretch;
* align-content: stretch; (仅在 flex-wrap: wrap; 生效)

应用于 Flex 项目的默认值：
* order: 0;
* flex-grow: 0;
* flex-shrink: 1;
* flex-basis: auto;
* flex: 0 1 auto; (简写)
* align-self: auto;

浏览器兼容性：

Flexbox 已经被现代浏览器广泛支持。对于旧版本的浏览器（如 IE 10 及以下），可能需要使用旧语法（例如 -webkit-box 或 -ms-flexbox 前缀）或者 Flexbox 的旧版本语法。但在当前（2023年以后），绝大多数用户使用的浏览器都完整支持 Flexbox 的最新标准语法，所以通常可以直接使用标准属性，无需加前缀。您可以通过 caniuse.com 查询详细的兼容性信息。

七、Flexbox 与 Grid 的关系

Flexbox 适用于一维布局（单行或单列），非常适合构建组件内部的布局、导航菜单、表单元素排列等。

Grid 布局（CSS Grid Layout）适用于二维布局（行和列），更适合整个页面的结构布局，如头部、侧边栏、主内容区和页脚的整体划分，或者复杂的表格型布局。

它们不是竞争关系，而是互补关系。在实际开发中，你常常会将它们结合使用：用 Grid 构建页面的整体框架，然后在框架内部的各个区域（如侧边栏、卡片列表）使用 Flexbox 进行内部元素的排列和对齐。

八、总结与展望

Flexbox 作为 CSS3 中重要的布局模块，极大地简化了网页布局的复杂性，特别是在处理项目的对齐、分布和弹性伸缩方面。通过掌握 Flex 容器和 Flex 项目的属性，以及主轴和交叉轴的概念，你就能轻松应对大多数一维布局需求。

本文详细介绍了 Flexbox 的各个属性及其用法，并通过多个常见示例展示了其强大之处。从基本的水平/垂直居中，到创建等高列和响应式布局，Flexbox 都是你的得力助手。

学习 Flexbox 的最佳方式是实践。尝试用 Flexbox 重构你现有的布局，或者创建新的组件。理解每个属性的作用，特别是 flex-direction, justify-content, align-items, 以及 flex 简写属性，是掌握 Flexbox 的关键。

随着你对 Flexbox 的熟练，你会发现它能让你写出更简洁、更易读、更易于维护的 CSS 代码，并更好地适应不同屏幕尺寸的设备，为用户提供更优质的浏览体验。当你遇到更复杂的二维布局问题时，不妨继续学习 CSS Grid 布局，将 Flexbox 和 Grid 结合起来，你将拥有处理几乎所有现代网页布局挑战的能力。

开始你的 Flexbox 之旅吧！实践是检验真理的唯一标准。

---