Flex佈局實戰（一）：骰子
阿新 • • 發佈：2018-11-12
參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
一、單專案
（0）初始化
為父元素新增display: flex後，item自動轉換為block元素
<style type="text/css"> .box{ background: blue; display: flex; /*為父元素新增flex後，span.item自動轉換為block元素*/ width: 300px; height: 300px; } .item{ background: orange; width: 100px; height: 100px; border: 1px solid red; } </style> <div class="box"> <span class="item"></span> </div>
（1）
.box{
display: flex; /*1*/
justify-content: center; /*2*/
background: blue;
width: 300px;
height: 300px;
}
（2）
.box{
display: flex; /*1*/
justify-content: flex-end; /*2*/
background: blue;
width: 300px;
height: 300px;
}
（3）
.box{ display: flex; /*1*/ justify-content: center; /*2*/ align-items: center; /*3*/ background: blue; width: 300px; height: 300px; }
（4）
.box{
display: flex; /*1*/
justify-content: flex-end; /*2*/
align-items: center; /*3*/
background: blue;
width: 300px;
height: 300px;
}
（5）
.box{ display: flex; /*1*/ justify-content: flex-start; /*2*/ align-items: flex-end; /*3*/ background: blue; width: 300px; height: 300px; }
（6）
.box{
display: flex; /*1*/
justify-content: center; /*2*/
align-items: flex-end; /*3*/
background: blue;
width: 300px;
height: 300px;
}
二、雙專案
（0）初始化
<style type="text/css">
.box{
display: flex; /*1*/
background: blue;
width: 300px;
height: 300px;
}
.item{
background: orange;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<div class="box">
<span class="item"></span>
<span class="item"></span>
</div>
（1）
.box{
display: flex; /*1*/
justify-content: space-around; /*2*/
background: blue;
width: 300px;
height: 300px;
}
（2）
.box{
display: flex; /*1*/
justify-content:space-between; /*2*/
background: blue;
width: 300px;
height: 300px;
}
（3）
注：flex-direction: column；即讓justify-content控制縱向，讓align-items控制橫向。
flex-direction: column；後相當於把(2)進行了旋轉從而得到(3)
.box{
display: flex; /*1*/
flex-direction: column; /*2*/
justify-content:space-between; /*3*/
background: blue;
width: 300px;
height: 300px;
}
（4）
.box{
display: flex; /*1*/
justify-content:space-between; /*2*/
align-items: center; /*3*/
background: blue;
width: 300px;
height: 300px;
}
（5）
注：flex-direction: column；即讓justify-content控制縱向，讓align-items控制橫向。
flex-direction: column；後相當於把(4)進行了旋轉從而得到(5)
.box{
display: flex; /*1*/
flex-direction: column; /*2*/
justify-content:space-between; /*3*/
align-items: center; /*4*/
background: blue;
width: 300px;
height: 300px;
}
（6）
如果不設定align-self: center，即為上面的(0)初始化。
我們讓第二個item元素垂直居中，即得到上圖。
.box{
display: flex; /*1*/
background: blue;
width: 300px;
height: 300px;
}
.item:nth-child(2){
align-self: center; /*2*/
}
（7）
.box{
display: flex; /*1*/
background: blue;
width: 300px;
height: 300px;
}
.item:nth-child(2){
align-self: flex-end; /*2*/
}
（8）
.box{
display: flex; /*1*/
justify-content: space-between; /*2*/
background: blue;
width: 300px;
height: 300px;
}
.item:nth-child(2){
align-self: center; /*3*/
}
（9）
.box{
display: flex; /*1*/
justify-content: space-between; /*2*/
background: blue;
width: 300px;
height: 300px;
}
.item:nth-child(2){
align-self: flex-end; /*3*/
}
三、三專案
（0）初始化
<style type="text/css">
.box{
display: flex; /*1*/
background: blue;
width: 300px;
height: 300px;
}
.item{
background: orange;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
（1）
.box{
display: flex; /*1*/
background: blue;
width: 300px;
height: 300px;
}
.item:nth-child(2){
align-self: center; /*2*/
}
.item:nth-child(3){
align-self: flex-start; /*3*/
}
（2）
.box{
display: flex; /*1*/
background: blue;
width: 300px;
height: 300px;
}
.item:nth-child(2){
align-self: center; /*2*/
}
.item:nth-child(3){
align-self: flex-end; /*3*/
}
四、四專案
1、情景一
（0）初始化
我們發現，雖然為每個item設定了98px的寬度，但是由於flex-wrap預設值為nowrap(不換行)，所以每個item的長度被壓縮了。
如果我們把每個item的width設為110px, 最後得到的結果還是和上圖一樣，width被壓縮了。
<style type="text/css">
.box{
display: flex; /*1*/
background: blue;
width: 300px;
height: 300px;
}
.item{
background: orange;
width: 98px;
height: 98px;
border: 1px solid red;
}
</style>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
（1）
將flex-wrap值設為wrap後（即允許換行），每個item又恢復為原來的寬度。
.box{
display: flex; /*1*/
flex-wrap: wrap; /*2*/
background: blue;
width: 300px;
height: 300px;
}
提問：
在上圖(1)的基礎上，把item的width改為100px，且採用的是W3標準盒模型，佈局會變成什麼樣？
分析：
由於採用W3標準盒模型，所以當把item改為100px後，item的真實長度變為 (2 + 100) = 102px。
又因為我們使用了flex-wrap: wrap;即允許換行，所以item的width不會被壓縮。而box的width為300px，一行排不下3個item元素，所以排到第三個item時就會另起一行，變成下圖這樣。
（2）
既然我們是在父元素加 justify-content、align-items屬性，所以這兩個屬性肯定是對其所有子元素（看成一個整體）作用的。
在這裡，我們把4個item當作一個整體操作的，當設定justify-content: flex-end後，前三個item由於已經填充滿了一行，所以並沒有變化，而最後一個item由於沒有填充滿一行，所以就移到了這行中最靠後的位置。
.box{
display: flex; /*1*/
flex-wrap: wrap; /*2*/
justify-content: flex-end; /*3*/
/* 加上align-items: flex-start; 什麼都不會發生，原因往下看*/
background: blue;
width: 300px;
height: 300px;
}
（3）
既然我們是在父元素加 justify-content、align-items屬性，所以這兩個屬性肯定是對其所有子元素（看成一個整體）作用的。
通過加上align-items: flex-end;的位置變化可以看出，4個item是被看作一個整體的，所以(2)加上align-items: flex-start;什麼都不會發生。
.box{
display: flex; /*1*/
flex-wrap: wrap; /*2*/
justify-content: flex-end; /*3*/
align-items: flex-end; /*4*/
background: blue;
width: 300px;
height: 300px;
}
（4）
這裡用了align-content（即：多周線對齊設定），所以再設定align-items會無效化。
.box{
display: flex; /*1*/
flex-wrap: wrap; /*2*/
justify-content: flex-end; /*3*/
align-content: flex-start; /*4*/ /*多周線對齊設定*/
/*因為用了align-content，所以此處設定align-items為任何值都無效*/
background: blue;
width: 300px;
height: 300px;
}
（5）
.box{
display: flex; /*1*/
flex-wrap: wrap; /*2*/
justify-content: flex-start; /*3*/
align-content: flex-start; /*4*/ /*多周線對齊設定*/
background: blue;
width: 300px;
height: 300px;
}
（6）
.box{
display: flex; /*1*/
flex-wrap: wrap; /*2*/
justify-content: center; /*3*/
align-content: flex-start; /*4*/ /*多周線對齊設定*/
background: blue;
width: 300px;
height: 300px;
}
（7）
.box{
display: flex; /*1*/
flex-wrap: wrap; /*2*/
justify-content: center; /*3*/
align-content: flex-end; /*4*/ /*多周線對齊設定*/
background: blue;
width: 300px;
height: 300px;
}
（8）
我們可以把前三個item看成一個整體，最後一個item看成一個整體，所以設定 align-content: space-between;後變成了上圖。
.box{
display: flex; /*1*/
flex-wrap: wrap; /*2*/
justify-content: center; /*3*/
align-content: space-between; /*4*/ /*多周線對齊設定*/
background: blue;
width: 300px;
height: 300px;
}
（9）
.box{
display: flex; /*1*/
flex-wrap: wrap; /*2*/
justify-content: flex-end; /*3*/
align-content: space-between; /*4*/ /*多周線對齊設定*/
background: blue;
width: 300px;
height: 300px;
}
2、情景二
（0）初始化
<style type="text/css">
.box{
display: flex; /*1*/
background: blue;
width: 300px;
height: 300px;
}
.column{
background:green;
}
.item{
background: orange;
width: 98px;
height: 98px;
border: 1px solid red;
}
</style>
<div class="box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
（1）
.box{
margin-top: 30px;
display: flex; /*1*/
background: blue;
width: 300px;
height: 300px;
}
.column{
display: flex; /*2*/
background:green;
}
- 我們為column加上了display: flex後，item就出現了。
說明flex屬性不具有繼承性！ - 且為column加上display: flex後，column的width為200px，兩個column也就是400px, 所以會覆蓋box（這裡column的width沒有被壓縮，是因為給column設定了flex後，產生了新的BFC）
所以為了避免這種情況發生，我們可以將column的width設為150px
（2）
.box{
margin-top: 30px;
display: flex; /*1*/
flex-wrap:wrap; /*3*/
background: blue;
width: 300px;
height: 300px;
}
.column{
display: flex; /*2*/
background:green;
}
（3）
.box{
margin-top: 30px;
display: flex; /*1*/
flex-wrap:wrap; /*3*/
align-content: space-between; /*4*/
/*此時加justify-content: space-between;什麼都不會發生*/
background: blue;
width: 300px;
height: 300px;
}
.column{
display: flex; /*2*/
background:green;
}
（4）
.box{
margin-top: 30px;
display: flex; /*1*/
flex-wrap:wrap; /*3*/
align-content: space-between; /*4*/
background: blue;
width: 300px;
height: 300px;
}
.column{
display: flex; /*2*/
flex-basis: 100%; /*5*/
background:green;
}
（5）
第二個column裡的兩個item都設為flex-grow: 1;所以平攤(4)裡的剩餘空間，所以兩個item長度相等。
.box{
margin-top: 30px;
display: flex; /*1*/
flex-wrap:wrap; /*3*/
align-content: space-between; /*4*/
background: blue;
width: 300px;
height: 300px;
}
.column{
display: flex; /*2*/
flex-basis: 100%; /*5*/
background:green;
}
.column:nth-child(2) .item{
flex-grow: 1; /*6*/
}
（6）
第二個column裡的第二個item的with是，第一個item的width的3倍
.box{
margin-top: 30px;
display: flex; /*1*/
flex-wrap:wrap; /*3*/
align-content: space-between; /*4*/
background: blue;
width: 300px;
height: 300px;
}
.column{
display: flex; /*2*/
flex-basis: 100%; /*5*/
background:green;
}
.column:nth-child(2) .item{
flex-grow: 1; /*6*/
}
.column:nth-child(2) .item:nth-child(2){
flex-grow: 3; /*7*/
}
（7） 這裡接著圖(4)擴充套件
.box{
margin-top: 30px;
display: flex; /*1*/
flex-wrap:wrap; /*3*/
align-content: space-between; /*4*/
background: blue;
width: 300px;
height: 300px;
}
.column{
display: flex; /*2*/
flex-basis: 100%; /*5*/
justify-content: space-between; /*6*/
background:green;
}
五、六專案
1、情景一
（0）初始化
<style type="text/css">
.box{
margin-top: 30px;
display: flex; /*1*/
background: blue;
width: 300px;
height: 300px;
}
.item{
background: orange;
width: 98px;
height: 98px;
border: 1px solid red;
}
</style>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
（1）
.box{
margin-top: 30px;
display: flex; /*1*/
flex-direction: column; /*2*/
background: blue;
width: 300px;
height: 300px;
}
（2）
.box{
margin-top: 30px;
display: flex; /*1*/
flex-wrap: wrap; /*2*/
align-content: space-between; /*3*/
background: blue;
width: 300px;
height: 300px;
}
（3）
.box{
margin-top: 30px;
display: flex; /*1*/
flex-wrap: wrap; /*2*/
align-content: space-between; /*3*/
flex-direction: column; /*4*/
background: blue;
width: 300px;
height: 300px;
}
2、情景二
（0）初始化
<style type="text/css">
.box{
display: flex; /*1*/
flex-wrap: wrap; /*3*/
background: blue;
width: 300px;
height: 300px;
}
.row{
display: flex; /*2*/
background: green;
}
.item{
background: orange;
width: 98px;
height: 98px;
border: 1px solid red;
}
</style>
<div class="box">
<div class="row">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
（1）
.box{
display: flex; /*1*/
flex-wrap: wrap; /*3*/
background: blue;
width: 300px;
height: 300px;
}
.row{
display: flex; /*2*/
flex-basis: 100%; /*4*/
background: green;
}
（2）
.box{
display: flex; /*1*/
flex-wrap: wrap; /*3*/
background: blue;
width: 300px;
height: 300px;
}
.row{
display: flex; /*2*/
flex-basis: 100%; /*4*/
background: green;
}
.row:nth-child(2){
justify-content: center; /*5*/
}
.row:nth-child(3){
justify-content: space-between; /*6*/
}
六、九專案
<style type="text/css">
.box{
display: flex; /*1*/
flex-wrap: wrap; /*2*/
background: blue;
width: 300px;
height: 300px;
}
.item{
background: orange;
width: 98px;
height: 98px;
border: 1px solid red;
}
</style>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>