一文吃透Flex布局

Flexbox（弹性盒子布局）是CSS3中引入的一种强大的布局模型，旨在提供更高效、灵活的方式来排列、对齐和分配容器内项目的空间。无论是创建复杂的页面布局，还是实现简单的对齐需求，Flexbox都能轻松应对。本文将全面探讨Flexbox的细节，帮助你彻底掌握这一技术。

1. Flexbox的基本概念

Flexbox布局由容器（Container）和 项目（Item）组成：

  • 容器 ：通过设置display: flex或display: inline-flex来定义弹性容器。

  • 项目 ：容器内的直接子元素成为弹性项目。

Flexbox的核心思想是通过主轴（Main Axis）和交叉轴（Cross Axis）来排列项目。

概念

2. 容器的属性

以下属性用于控制容器的行为：

2.1 display

任何一个容器都可以指定为弹性容器。

1
2
3
4
5
.container {
    display: flex; /* 块级弹性容器 */
    display: inline-flex; /* 行内弹性容器 */
    display: -webkit-flex; /* Safari */
}

2.2 flex-direction

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

1
2
3
4
5
6
.container {
    flex-direction: row; /* 默认值，水平排列 */
    flex-direction: row-reverse; /* 水平反向排列 */
    flex-direction: column; /* 垂直排列 */
    flex-direction: column-reverse; /* 垂直反向排列 */
}

2.3 flex-wrap

控制项目是否换行。

1
2
3
4
5
.container {
    flex-wrap: nowrap; /* 默认值，不换行 */
    flex-wrap: wrap; /* 换行 */
    flex-wrap: wrap-reverse; /* 反向换行 */
}

2.4 flex-flow

flex-direction和flex-wrap的简写。

1
2
3
.container {
    flex-flow: row wrap; /* 水平排列并换行 */
}

2.5 justify-content

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

1
2
3
4
5
6
7
8
.container {
    justify-content: flex-start; /* 默认值，左对齐 */
    justify-content: flex-end; /* 右对齐 */
    justify-content: center; /* 居中对齐 */
    justify-content: space-between; /* 两端对齐 */
    justify-content: space-around; /* 均匀分布 */
    justify-content: space-evenly; /* 完全均匀分布 */
}

2.6 align-items

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

1
2
3
4
5
6
7
.container {
    align-items: stretch; /* 默认值，拉伸填满容器 */
    align-items: flex-start; /* 顶部对齐 */
    align-items: flex-end; /* 底部对齐 */
    align-items: center; /* 居中对齐 */
    align-items: baseline; /* 基线对齐 */
}

2.7 align-content

定义多行项目在交叉轴上的对齐方式（仅在flex-wrap: wrap时生效）。

1
2
3
4
5
6
7
8
.container {
    align-content: stretch; /* 默认值，拉伸填满容器 */
    align-content: flex-start; /* 顶部对齐 */
    align-content: flex-end; /* 底部对齐 */
    align-content: center; /* 居中对齐 */
    align-content: space-between; /* 两端对齐 */
    align-content: space-around; /* 均匀分布 */
}

3. 项目的属性

以下属性用于控制项目的行为：

3.1 order

定义项目的排列顺序，数值越小越靠前。

1
2
3
.item {
    order: <integer>; /* 默认值为0 */
}

3.2 flex-grow

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

1
2
3
.item {
    flex-grow: 1; /* 项目将占据剩余空间 */
}

3.3 flex-shrink

定义项目的缩小比例，默认值为1（可缩小）。

1
2
3
.item {
    flex-shrink: 0; /* 项目不缩小 */
}

3.4 flex-basis

定义项目在分配多余空间之前的基础大小。

1
2
3
.item {
    flex-basis: 100px; /* 项目的基础宽度为100px */
}

3.5 flex

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

1
2
3
.item {
    flex: 1 0 100px; /* 放大比例为1，不缩小，基础宽度为100px */
}

3.6 align-self

定义单个项目在交叉轴上的对齐方式，覆盖align-items。

1
2
3
.item {
    align-self: flex-start; /* 顶部对齐 */
}

4. 使用Flex实现圣杯布局

4.1 圣杯布局

圣杯布局

1
2
3
4
5
6
7
8
9
<div class="container">
    <header>Header</header>
    <div class="main-content">
        <main>Main Content</main> <!--内容部分先渲染 -->
        <nav>Left</nav>
        <aside>Right</aside>
    </div>
    <footer>Footer</footer>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 使容器至少占满整个视口高度 */
}

header,
footer {
    flex: 0 0 auto; /* 头部和页脚不伸缩 */
    background-color: #777;
    padding: 10px;
}

.main-content {
    display: flex;
    flex: 1; /* 中间内容区域占满剩余空间 */
}

main {
    flex: 1; /* 中间内容自适应宽度 */
    background-color: #888;
    padding: 10px;
}

nav,
aside {
    flex: 0 0 200px; /* 左右侧栏宽度固定 */
    background-color: #999;
    padding: 10px;
}

nav {
    order: -1; /* 左侧栏放在最前面 */
}

5. 常见问题与解决方案

5.1 项目宽度超出容器

问题 ：项目宽度超出容器，导致布局错乱。
解决方案 ：设置flex-shrink: 0或调整flex-basis。

5.2 项目高度不一致

问题 ：项目高度不一致，影响对齐。
解决方案 ：使用align-items: stretch或align-self调整。

5.3 兼容性问题

问题 ：旧版浏览器不支持Flexbox。
解决方案 ：使用Autoprefixer或提供降级方案。

6. 关键点回顾

  • 容器属性 ：控制主轴、交叉轴的对齐和排列方式。

  • 项目属性 ：控制项目的顺序、大小和对齐方式。

  • 实际应用 ：水平居中、圣杯布局、等高列等。

  • 常见问题 ：宽度超出、高度不一致、兼容性问题。