#CSS 的弹性布局

在此之前，我们写的页面上元素是按照先后顺序排列的，块元素总是占据一行，不受我们控制。例如之前语义化章节中的示例代码中，aside 块作为侧边栏，却并没有显示在侧边，而是单独占据一行。

本节将学习 CSS 中最常用的布局方式——弹性布局，它可以方便地控制容器内项目的排列、对齐和分布方式。

通过将一个元素样式的 display 属性设为 flex，可以将该元素设为弹性布局的容器，容器的直接子元素将不再占据一行。

示例：

1<div style="display:flex; height:100px;">
2    <main style="background-color:#212121; color:cyan;">
3        main
4    </main>
5    <aside style="background-color:#666; color:yellow;">
6        aside
7    </aside>
8</div>
9

弹性布局

    main


    aside

#主轴和交叉轴

弹性容器中，默认水平方向为主轴，竖直方向为交叉轴，子元素在主轴上依次排列。

可以通过容器的 flex-direction 属性改变方向：

row - 水平方向为主轴，竖直方向为交叉轴
column - 竖直方向为主轴，水平方向为交叉轴

示例：

1<div style="display:flex; flex-direction:column; height:100px;">
2    <main style="background-color:#212121; color:cyan;">
3        main
4    </main>
5    <aside style="background-color:#666; color:yellow;">
6        aside
7    </aside>
8</div>
9

flex-direction:column

    main


    aside

这个示例将弹性布局的主轴设为了数值方向；相应的，交叉轴为水平方向。

#flex-grow 和 flex-shrink

当子元素的总长度小于主轴长度时，可以给子元素的样式添加 flex-grow 使其长度增加。

这个属性的值表示当弹性容器没有被占满时，子元素增加的长度占剩余长度的比例。

下面这个示例将 <main> 元素的 flex-grow 值设为 5，<aside> 的 flex-grow 元素设为 1。

因此剩余空间的将分配给 <main> 元素， aside 元素。

1<div style="display:flex; height:100px;">
2    <main style="flex-grow:5; background-color:#212121; color:cyan;">
3        main
4    </main>
5    <aside style="flex-grow:1; background-color:#666; color:yellow;">
6        aside
7    </aside>
8</div>
9

HTML

    main


    aside

相似的，当子元素的总长度大于主轴长度时，可以给子元素的样式添加 flex-shrink 使其长度减少。

这个属性的值表示当弹性容器内容溢出时，子元素减少的长度占溢出长度的比例。

#主轴上的对齐方式

默认情况下，子元素在容器主轴上向起始边缘对齐，可以通过容器的 justify-content 属性修改对齐方式。

start - 子元素在容器主轴上向起始边缘对齐
end - 子元素在容器主轴上向末端边缘对齐
center - 子元素在容器主轴上居中对齐
space-between - 子元素在容器主轴均匀分布，两端不留空
space-around - 子元素在容器主轴均匀分布，两端留空为间隔的一半
space-evenly - 子元素在容器主轴均匀分布，两端留空和间隔一致

下面的示例可以清晰的查看这六种对齐方式的差异。

1<div style="display:flex; justify-content:start; height:100px; background-color:#212121;">
2    <div style="background-color:red;color:white;">item</div>
3    <div style="background-color:green;color:white;">item</div>
4    <div style="background-color:blue;color:white;">item</div>
5</div>
6
7<div style="display:flex; justify-content:end; height:100px; background-color:#212121;">
8    <div style="background-color:red;color:white;">item</div>
9    <div style="background-color:green;color:white;">item</div>
10    <div style="background-color:blue;color:white;">item</div>
11</div>
12
13<div style="display:flex; justify-content:center; height:100px; background-color:#212121;">
14    <div style="background-color:red;color:white;">item</div>
15    <div style="background-color:green;color:white;">item</div>
16    <div style="background-color:blue;color:white;">item</div>
17</div>
18
19<div style="display:flex; justify-content:space-between; height:100px; background-color:#212121;">
20    <div style="background-color:red;color:white;">item</div>
21    <div style="background-color:green;color:white;">item</div>
22    <div style="background-color:blue;color:white;">item</div>
23</div>
24
25<div style="display:flex; justify-content:space-around; height:100px; background-color:#212121;">
26    <div style="background-color:red;color:white;">item</div>
27    <div style="background-color:green;color:white;">item</div>
28    <div style="background-color:blue;color:white;">item</div>
29</div>
30
31<div style="display:flex; justify-content:space-evenly; height:100px; background-color:#212121;">
32    <div style="background-color:red;color:white;">item</div>
33    <div style="background-color:green;color:white;">item</div>
34    <div style="background-color:blue;color:white;">item</div>
35</div>
36

justify-content:start

item


item


item

justify-content:end

item


item


item

justify-content:center

item


item


item

justify-content:space-between

item


item


item

justify-content:space-around

item


item


item

justify-content:space-evenly

item


item


item

#交叉轴上的对齐方式

默认情况下，子元素在容器交叉轴上两端对齐，即占满整个交叉轴。可以通过容器的 align-items 属性修改对齐方式。

stretch - 子元素在容器交叉轴上两端对齐
start - 子元素在容器交叉轴上向起始边缘对齐
end - 子元素在容器交叉轴上向末端边缘对齐
center - 子元素在容器交叉轴上居中对齐

下面的示例可以清晰的查看这四种对齐方式的差异。

1<div style="display:flex; align-items:stretch; height:100px; background-color:#212121;">
2    <div style="background-color:red;color:white;">item</div>
3    <div style="background-color:green;color:white;">item</div>
4    <div style="background-color:blue;color:white;">item</div>
5</div>
6
7<div style="display:flex; align-items:start; height:100px; background-color:#212121;">
8    <div style="background-color:red;color:white;">item</div>
9    <div style="background-color:green;color:white;">item</div>
10    <div style="background-color:blue;color:white;">item</div>
11</div>
12
13<div style="display:flex; align-items:end; height:100px; background-color:#212121;">
14    <div style="background-color:red;color:white;">item</div>
15    <div style="background-color:green;color:white;">item</div>
16    <div style="background-color:blue;color:white;">item</div>
17</div>
18
19<div style="display:flex; align-items:center; height:100px; background-color:#212121;">
20    <div style="background-color:red;color:white;">item</div>
21    <div style="background-color:green;color:white;">item</div>
22    <div style="background-color:blue;color:white;">item</div>
23</div>
24

align-items:stretch

item


item


item

align-items:start

item


item


item

align-items:end

item


item


item

align-items:center

item


item


item

#换行

默认情况下，当子元素的总长度大于主轴长度时，子元素会溢出显示。可以通过容器的 flex-wrap 属性让溢出的元素换行。

nowrap - 不换行
wrap - 当空间不足时自动换行
wrap-reverse - 当空间不足时自动换行，并且行的顺序逆转

下面的示例中容器宽度在不断变化，可以清晰的查看这三种方式的差异。

1<div style="display:flex; align-items:center; flex-wrap:nowrap; background-color:#212121;">
2    <div style="background-color:red;color:white; width:80px;">item</div>
3    <div style="background-color:green;color:white; width:80px;">item</div>
4    <div style="background-color:blue;color:white; width:80px;">item</div>
5    <div style="background-color:orange;color:white; width:80px;">item</div>
6    <div style="background-color:purple;color:white; width:80px;">item</div>
7    <div style="background-color:cyan;color:white; width:80px;">item</div>
8</div>
9
10<div style="display:flex; align-items:center; flex-wrap:wrap; background-color:#212121;">
11    <div style="background-color:red;color:white; width:80px;">item</div>
12    <div style="background-color:green;color:white; width:80px;">item</div>
13    <div style="background-color:blue;color:white; width:80px;">item</div>
14    <div style="background-color:orange;color:white; width:80px;">item</div>
15    <div style="background-color:purple;color:white; width:80px;">item</div>
16    <div style="background-color:cyan;color:white; width:80px;">item</div>
17</div>
18
19<div style="display:flex; align-items:center; flex-wrap:wrap-reverse; background-color:#212121;">
20    <div style="background-color:red;color:white; width:80px;">item</div>
21    <div style="background-color:green;color:white; width:80px;">item</div>
22    <div style="background-color:blue;color:white; width:80px;">item</div>
23    <div style="background-color:orange;color:white; width:80px;">item</div>
24    <div style="background-color:purple;color:white; width:80px;">item</div>
25    <div style="background-color:cyan;color:white; width:80px;">item</div>
26</div>
27

flex-wrap:nowrap

flex-wrap:nowrap


    item


    item


    item


    item


    item


    item

flex-wrap:wrap

flex-wrap:nowrap


    item


    item


    item


    item


    item


    item

flex-wrap:wrap-reverse

flex-wrap:nowrap


    item


    item


    item


    item


    item


    item

#行在交叉轴上的对齐方式

通过容器的 align-content 属性设置行在交叉轴上的对齐方式。

start - 行在容器交叉轴上向起始边缘对齐
end - 行在容器交叉轴上向末端边缘对齐
center - 行在容器交叉轴上居中对齐
space-between - 行在容器交叉轴上均匀分布，两端不留空
space-around - 行在容器交叉轴上均匀分布，两端留空为间隔的一半
space-evenly - 行在容器交叉轴上均匀分布，两端留空为和间隔一致

下面的示例可以清晰的查看这六种对齐方式的差异。

1<div style="display:flex; align-content:start; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
2    <div style="background-color:red;color:white; width:40px;">item</div>
3    <div style="background-color:green;color:white; width:40px;">item</div>
4    <div style="background-color:blue;color:white; width:40px;">item</div>
5</div>
6
7<div style="display:flex; align-content:end; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
8    <div style="background-color:red;color:white; width:40px;">item</div>
9    <div style="background-color:green;color:white; width:40px;">item</div>
10    <div style="background-color:blue;color:white; width:40px;">item</div>
11</div>
12
13<div style="display:flex; align-content:center; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
14    <div style="background-color:red;color:white; width:40px;">item</div>
15    <div style="background-color:green;color:white; width:40px;">item</div>
16    <div style="background-color:blue;color:white; width:40px;">item</div>
17</div>
18
19<div style="display:flex; align-content:space-between; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
20    <div style="background-color:red;color:white; width:40px;">item</div>
21    <div style="background-color:green;color:white; width:40px;">item</div>
22    <div style="background-color:blue;color:white; width:40px;">item</div>
23</div>
24
25<div style="display:flex; align-content:space-around; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
26    <div style="background-color:red;color:white; width:40px;">item</div>
27    <div style="background-color:green;color:white; width:40px;">item</div>
28    <div style="background-color:blue;color:white; width:40px;">item</div>
29</div>
30
31<div style="display:flex; align-content:space-evenly; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
32    <div style="background-color:red;color:white; width:40px;">item</div>
33    <div style="background-color:green;color:white; width:40px;">item</div>
34    <div style="background-color:blue;color:white; width:40px;">item</div>
35</div>
36

align-content:start

item


item


item

align-content:end

item


item


item

align-content:center

item


item


item

align-content:space-between

item


item


item

align-content:space-around

item


item


item

align-content:space-evenly

item


item


item

《CSS 的弹性布局》是转载文章，点击查看原文。