你会看到,不管是什么布局,Flex往往都可以几行命令搞定。

一、骰子的布局
骰子的一面,最多可以放置9个点。

运行下面代码,就来看看Flex如何实现,从1个点到9个点的布局。
提示:您可以先修改部分代码再运行

如果不加说明,本节的HTML模板一律如下。
1 | < div class = "box" > |
2 | < span class = "item" ></ span > |
3 | </ div > |
上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。
1.1 单项目
首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。

1 | .box { |
2 | display : flex; |
3 | } |
设置项目的对齐方式,就能实现居中对齐和右对齐。

1 | .box { |
2 | display : flex; |
3 | justify- content : center ; |
4 | } |

1 | .box { |
2 | display : flex; |
3 | justify- content : flex-end; |
4 | } |
设置交叉轴对齐方式,可以垂直移动主轴。

1 | .box { |
2 | display : flex; |
3 | align-items: center ; |
4 | } |

1 | .box { |
2 | display : flex; |
3 | justify- content : center ; |
4 | align-items: center ; |
5 | } |

1 | .box { |
2 | display : flex; |
3 | justify- content : center ; |
4 | align-items: flex-end; |
5 | } |

1 | .box { |
2 | display : flex; |
3 | justify- content : flex-end; |
4 | align-items: flex-end; |
5 | } |
1.2 双项目

1 | .box { |
2 | display : flex; |
3 | justify- content : space-between; |
4 | } |

1 | .box { |
2 | display : flex; |
3 | flex- direction : column; |
4 | justify- content : space-between; |
5 | } |

1 | .box { |
2 | display : flex; |
3 | flex- direction : column; |
4 | justify- content : space-between; |
5 | align-items: center ; |
6 | } |

1 | .box { |
2 | display : flex; |
3 | flex- direction : column; |
4 | justify- content : space-between; |
5 | align-items: flex-end; |
6 | } |

1 | .box { |
2 | display : flex; |
3 | } |
4 |
5 | .item:nth-child( 2 ) { |
6 | align-self: center ; |
7 | } |

1 | .box { |
2 | display : flex; |
3 | justify- content : space-between; |
4 | } |
5 |
6 | .item:nth-child( 2 ) { |
7 | align-self: flex-end; |
8 | } |

1 | .box { |
2 | display : flex; |
3 | } |
4 | .item:nth-child( 2 ) { |
5 | align-self: center ; |
6 | } |
7 | .item:nth-child( 3 ) { |
8 | align-self: flex-end; |
9 | } |

1 | .box { |
2 | display : flex; |
3 | flex-wrap: wrap; |
4 | justify- content : flex-end; |
5 | align- content : space-between; |
6 | } |

HTML代码:
01 | < div class = "box" > |
02 | < div class = "column" > |
03 | < span class = "item" ></ span > |
04 | < span class = "item" ></ span > |
05 | </ div > |
06 | < div class = "column" > |
07 | < span class = "item" ></ span > |
08 | < span class = "item" ></ span > |
09 | </ div > |
10 | </ div > |
CSS代码:
01 | .box { |
02 | display : flex; |
03 | flex-wrap: wrap; |
04 | align- content : space-between; |
05 | } |
06 |
07 | .column { |
08 | flex-basis: 100% ; |
09 | display : flex; |
10 | justify- content : space-between; |
11 | } |
1.5 六项目

1 | .box { |
2 | display : flex; |
3 | flex-wrap: wrap; |
4 | align- content : space-between; |
5 | } |

1 | .box { |
2 | display : flex; |
3 | flex- direction : column; |
4 | flex-wrap: wrap; |
5 | align- content : space-between; |
6 | } |

HTML代码:
01 | < div class = "box" > |
02 | < div class = "row" > |
03 | < span class = "item" ></ span > |
04 | < span class = "item" ></ span > |
05 | < span class = "item" ></ span > |
06 | </ div > |
07 | < div class = "row" > |
08 | < span class = "item" ></ span > |
09 | </ div > |
10 | < div class = "row" > |
11 | < span class = "item" ></ span > |
12 | < span class = "item" ></ span > |
13 | </ div > |
14 | </ div > |
CSS代码:
01 | .box { |
02 | display : flex; |
03 | flex-wrap: wrap; |
04 | } |
05 |
06 | .row{ |
07 | flex-basis: 100% ; |
08 | display :flex; |
09 | } |
10 |
11 | .row:nth-child( 2 ){ |
12 | justify- content : center ; |
13 | } |
14 |
15 | .row:nth-child( 3 ){ |
16 | justify- content : space-between; |
17 | } |
1.6 九项目

1 | .box { |
2 | display : flex; |
3 | flex-wrap: wrap; |
4 | } |
2.1 基本网格布局
最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。

HTML代码:
1 | < div class = "Grid" > |
2 | < div class = "Grid-cell" >...</ div > |
3 | < div class = "Grid-cell" >...</ div > |
4 | < div class = "Grid-cell" >...</ div > |
5 | </ div > |
CSS代码:
1 | .Grid { |
2 | display : flex; |
3 | } |
4 |
5 | .Grid-cell { |
6 | flex: 1 ; |
7 | } |
2.2 百分比布局
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。

HTML代码:
1 | < div class = "Grid" > |
2 | < div class = "Grid-cell u-1of4" >...</ div > |
3 | < div class = "Grid-cell" >...</ div > |
4 | < div class = "Grid-cell u-1of3" >...</ div > |
5 | </ div > |
CSS代码:
01 | .Grid { |
02 | display : flex; |
03 | } |
04 |
05 | .Grid-cell { |
06 | flex: 1 ; |
07 | } |
08 |
09 | .Grid-cell.u-full { |
10 | flex: 0 0 100% ; |
11 | } |
12 |
13 | .Grid-cell.u -1 of 2 { |
14 | flex: 0 0 50% ; |
15 | } |
16 |
17 | .Grid-cell.u -1 of 3 { |
18 | flex: 0 0 33.3333% ; |
19 | } |
20 |
21 | .Grid-cell.u -1 of 4 { |
22 | flex: 0 0 25% ; |
23 | } |
三、圣杯布局
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。

HTML代码:
1 | < body class = "HolyGrail" > |
2 | < header >...</ header > |
3 | < div class = "HolyGrail-body" > |
4 | < main class = "HolyGrail-content" >...</ main > |
5 | < nav class = "HolyGrail-nav" >...</ nav > |
6 | < aside class = "HolyGrail-ads" >...</ aside > |
7 | </ div > |
8 | < footer >...</ footer > |
9 | </ body > |
CSS代码:
01 | .HolyGrail { |
02 | display : flex; |
03 | min-height : 100 vh; |
04 | flex- direction : column; |
05 | } |
06 |
07 | header, |
08 | footer { |
09 | flex: 1 ; |
10 | } |
11 |
12 | .HolyGrail-body { |
13 | display : flex; |
14 | flex: 1 ; |
15 | } |
16 |
17 | .HolyGrail-content { |
18 | flex: 1 ; |
19 | } |
20 |
21 | .HolyGrail-nav, .HolyGrail-ads { |
22 | /* 两个边栏的宽度设为12em */ |
23 | flex: 0 0 12em ; |
24 | } |
25 |
26 | .HolyGrail-nav { |
27 | /* 导航放到最左边 */ |
28 | order: -1 ; |
29 | } |
如果是小屏幕,躯干的三栏自动变为垂直叠加。
01 | @media ( max-width : 768px ) { |
02 | .HolyGrail-body { |
03 | flex- direction : column; |
04 | flex: 1 ; |
05 | } |
06 | .HolyGrail-nav, |
07 | .HolyGrail-ads, |
08 | .HolyGrail-content { |
09 | flex: auto ; |
10 | } |
11 | } |
四、输入框的布局
我们常常需要在输入框的前方添加提示,后方添加按钮。

HTML代码:
1 | < div class = "InputAddOn" > |
2 | < span class = "InputAddOn-item" >...</ span > |
3 | < input class = "InputAddOn-field" > |
4 | < button class = "InputAddOn-item" >...</ button > |
5 | </ div > |
CSS代码:
1 | .InputAddOn { |
2 | display : flex; |
3 | } |
4 |
5 | .InputAddOn-field { |
6 | flex: 1 ; |
7 | } |
五、悬挂式布局
有时,主栏的左侧或右侧,需要添加一个图片栏。

HTML代码:
1 | < div class = "Media" > |
2 | < img class = "Media-figure" src = "" alt = "" > |
3 | < p class = "Media-body" >...</ p > |
4 | </ div > |
CSS代码:
01 | .Media { |
02 | display : flex; |
03 | align-items: flex-start; |
04 | } |
05 |
06 | .Media-figure { |
07 | margin-right : 1em ; |
08 | } |
09 |
10 | .Media-body { |
11 | flex: 1 ; |
12 | } |
六、固定的底栏
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。

HTML代码:
1 | < body class = "Site" > |
2 | < header >...</ header > |
3 | < main class = "Site-content" >...</ main > |
4 | < footer >...</ footer > |
5 | </ body > |
CSS代码:
1 | .Site { |
2 | display : flex; |
3 | min-height : 100 vh; |
4 | flex- direction : column; |
5 | } |
6 |
7 | .Site-content { |
8 | flex: 1 ; |
9 | } |
七、流式布局
每行的项目数固定,会自动分行。

CSS代码:
01 | .parent { |
02 | width : 200px ; |
03 | height : 150px ; |
04 | background-color : black ; |
05 | display : flex; |
06 | flex-flow: row wrap; |
07 | align- content : flex-start; |
08 | } |
09 |
10 | .child { |
11 | box-sizing: border-box; |
12 | background-color : white ; |
13 | flex: 0 0 25% ; |
14 | height : 50px ; |
15 | border : 1px solid red ; |
16 | } |
上一篇:Flex 布局教程:语法篇
文章转载自:阮一峰的网络日志