CSS 小結筆記之伸縮佈局（flex）
之前塊級元素佈局在同一行，可以通過display或position或float來實現，而本篇介紹一個新的方法——flex（彈性佈局）。
flex 為和模型佈局提供了極大地靈活性，所謂彈性佈局即可根據大小判定自動伸縮。
flex相關的各個屬性如下：
1、 display：flex； 在父盒子定義flex，子盒子才能使用flex屬性
2、 flex：none | flex-grow flex-shrink flex-basis 設定子盒子的縮放比例，可以一起指定也可以單獨指定。（均不可為負數）
（1）none 相當於 flex： 0 0 auto；
（2）flex-grow 用來規定盒子的擴充套件比率，即盒子相對於其他盒子能夠分配到的空間的比值，沒有指定flex的不參與分配。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 800px;
height: 400px;
border: 2px solid red;
display: flex;
margin: 200px auto;
}
.son1 {
background-color: aqua;
width: 200px;
}
.son2 {
background-color: green;
flex-grow: 1;
width: 50px;
}
.son3 {
background-color: blue;
flex-grow: 2;
width: 30px;
}
.son4 {
background-color: orange;
flex-grow: 3;
width: 80px;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
<div class="son4">4</div>
</div>
</body>
</html>
View Code
上面圖中子盒子所佔大小的計算方法為：
a、.son1 沒有指定flex 因此不參與分配大小為固定的200px；
b、剩下的空間需要減去盒子固有的寬度來繼續分配，即可分配空間為
600-50-30-80=440px
c、指定分配的比率為1:2:3 所以各自能分配到的大小為440*（1/6），440*（2/6），440*（3/6）
d、最後可得出各個盒子的大小
.son2: 440*（1/6）+50=123.3px
.son3: 440*（2/6）+30=176.7px
.son4: 440*（3/6）+80=300px
（3）、flex-shrink 規定盒子收縮率，一般是在子盒子總體大小超過父盒子情況下，確定各個盒子的縮小比例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 400px;
height: 400px;
border: 2px solid red;
display: flex;
margin: 200px auto;
}
.son1 {
width: 100px;
flex-shrink: 1;
background-color: aqua;
}
.son2 {
width: 200px;
flex-shrink: 2;
background-color: orange;
}
.son3 {
width: 300px;
flex-shrink: 3;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
</div>
</body>
</html>
View Code
上面圖中子盒子所佔大小的計算方法為：
a、子盒子總體寬度大小為：100+200+300=600px
b、超過父盒子 600-400=200px
c、收縮比率為：1:2:3 ，則對收縮大小進行加權求值,求出收縮大小
.son1: 200*[100*1/（1*100+2*200+3*300）]=14px
.son2: 200*[200*2/（1*100+2*200+3*300）]=57px
.son1: 200*[300*3/（1*100+2*200+3*300）]=129px
d、最終各個盒子大小為
.son1: 100-14=86px；
.son2: 200-57=143px；
.son3: 300-129=171px；
（4）、flex-basis：長度 |百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 超過按照比例劃分 */
.fa {
width: 400px;
height: 400px;
border: 2px solid red;
display: flex;
margin: 200px auto;
}
.son1 {
width: 100px;
flex-basis: 35%;
background-color: aqua;
}
.son2 {
width: 200px;
flex-basis: 30%;
background-color: orange;
}
.son3 {
width: 300px;
flex-basis: 50%;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
</div>
</body>
</html>
View Code
一般設定不超過盒子大小或者不超過100%，超過100%則按比例分配空間。
如上圖按7:6:10 來分配，設定為auto，則以自身大小來分配。
（5）、常用複合屬性
flex：1相當於 flex：1 1 0%；
flex：auto 相當於 flex：1 1 auto；
flex：none 相當於 flex：0 0 auto；
flex：0 none 或flex：initial 相當於 flex：0 1 auto；
3、 flex-direction：row | row-reverse | column | column-reverse 調整株洲方向，即合適是水平分佈還是垂直分佈的，預設是水平方向。
上面四個值分別是，水平| 水平反向| 垂直| 垂直反向
反向的意思是，盒子順序是相反的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 400px;
height: 400px;
border: 2px solid red;
display: flex;
margin: 200px auto;
flex-direction: column-reverse;
}
.son1 {
flex: 1;
background-color: aqua;
}
.son2 {
flex: 1;
background-color: orange;
}
.son3 {
flex: 1;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
</div>
</body>
</html>
View Code
4、 justify-content: flex-start | flex-end | center | space-between | space-around 子盒子在父盒子中的水平對齊方式。
flex-start ：預設值，專案向容器起始位置對齊（靠左對齊）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 400px;
height: 200px;
border: 1px solid red;
display: flex;
margin: 100px auto;
justify-content: flex-start;
}
.son {
flex: 0 0 20%;
background-color: aqua;
}
.son:nth-child(2) {
background-color: orange;
}
.son:nth-child(3) {
background-color: deeppink;
}
</style>
</head>
<body>
<div class="fa">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
</div>
</body>
</html>
View Code
接下來只將justify-content 值改變，就不重複寫程式碼了，只給出結果圖
flex-end：專案向容器結束位置對齊。（靠右對齊）
center：專案位於容器的中間。（水平居中）
space-between：各個專案中間有空隙，但是開頭和結尾緊貼容器（父盒子）
space-around：各個專案中間有空隙，且空隙距離相同（相當於每個盒子左右給了一個相同的margin值）
5、 align-items：flex-start | flex-end | center | baseline | stretch 子盒子在父盒子中的垂直對齊方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
margin: 100px auto;
align-items: stretch;
}
.son {
flex: 0 0 20%;
padding: 30px 0;
background-color: aqua;
font-size: 40px;
}
.son:nth-child(2) {
padding: 50px 0;
background-color: orange;
}
.son:nth-child(3) {
padding: 100px 0;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="fa">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
</div>
</body>
</html>
View Code
同樣接下來幾種只給出效果圖
flex-start：上對齊
flex-end ：下對齊
center：垂直居中對齊
baseline：與專案的第一行文字的基線對齊，因此當基線在同一條線上時，與flex-start一致
6、 flex-wrap：nowrap | wrap | wrap-reverse 當子盒子大小超過父盒子是是否換行
nowrap：預設值，不換行。強行在一行顯示，因此每個盒子的大小都會減少。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
margin: 100px auto;
align-items: baseline;
flex-wrap: nowrap;
}
.son {
width: 50px;
background-color: aqua;
font-size: 40px;
}
.son:nth-child(2) {
background-color: orange;
}
.son:nth-child(3) {
background-color: deeppink;
}
.son:nth-child(4) {
background-color: green;
}
.son:nth-child(5) {
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="fa">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
<div class="son">6</div>
</div>
</body>
</html>
View Code
wrap：換行顯示。
wrap-reverse：換行且倒著顯示
7、 flex-flow: flex-direction flex-wrap; flex-flow 是flex-direction 和 flex-wrap 的簡寫，預設值是flex-flow： row wrap
align-content：flex-start | flex-end | center | space-between | space-around | stretch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
margin: 100px auto;
flex-wrap: wrap;
align-content: stretch;
}
.son {
/* width: 50px; */
padding: 10px;
background-color: aqua;
font-size: 40px;
}
.son:nth-child(2) {
background-color: orange;
}
.son:nth-child(3) {
background-color: deeppink;
}
.son:nth-child(4) {
background-color: green;
}
.son:nth-child(5) {
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="fa">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
<div class="son">6</div>
</div>
</body>
</html>
View Code
flex-start：上對齊
flex-end：下對齊
center：居中對齊
space-between ：與justify-content中的 space-between類似 最上一行 頂對齊，最下一行 底對齊
space-around：與justify-content中的 space-around類似 各個行上下有空隙，且空隙距離相同（相當於每行上下給了一個相同的margin值）
9、 order ：設定子盒子顯示順序。值取整數，可以為負數，數值越小的排列方向越靠前。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
margin: 100px auto;
flex-wrap: wrap;
align-content: space-between;
}
.son {
/* width: 50px; */
padding: 10px;
background-color: aqua;
font-size: 40px;
}
.son:nth-child(2) {
background-color: orange;
order: -2;
}
.son:nth-child(3) {
background-color: deeppink;
}
.son:nth-child(4) {
background-color: green;
order: 3;
}
.son:nth-child(5) {
order: 2;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="fa">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
<div class="son">6</div>
</div>
</body>
</html>
View Code
