CSS 的弹性布局
转载自 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>
主轴和交叉轴
弹性容器中，默认水平方向为主轴，竖直方向为交叉轴，子元素在主轴上依次排列。
可以通过容器的 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>
这个示例将弹性布局的主轴设为了数值方向；相应的，交叉轴为水平方向。
flex-grow 和 flex-shrink
当子元素的总长度小于主轴长度时，可以给子元素的样式添加 flex-grow 使其长度增加。
这个属性的值表示当弹性容器没有被占满时，子元素增加的长度占剩余长度的比例。
下面这个示例将 <main> 元素的 flex-grow 值设为 5，<aside> 的 flex-grow 元素设为 1。
因此剩余空间的 $\frac{5}{5+1}$ 将分配给 <main> 元素，$\frac{1}{5+1}$ 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>
相似的，当子元素的总长度大于主轴长度时，可以给子元素的样式添加 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>
交叉轴上的对齐方式
默认情况下，子元素在容器交叉轴上两端对齐，即占满整个交叉轴。可以通过容器的 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>
换行
默认情况下，当子元素的总长度大于主轴长度时，子元素会溢出显示。
可以通过容器的 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>
行在交叉轴上的对齐方式
通过容器的 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>