2020-12-21（彈性盒子）
彈性盒子
1、彈性盒子與彈性元素
（彈性盒子不脫標）
- 彈性盒子：指的是使用display：flex或display：inline-flex宣告的容器。
- 彈性元素：指的是彈性盒子中的子元素。
- 主軸與側軸（交叉軸）
主軸方向：為子元素排列的方向。可以通過flex-direction改變。
側軸方向：與主軸方向垂直，為子元素的換行方向。可以通過flex-wrap改變。
【注】
1.文字節點也可以被彈性佈局操作。
2.絕對定位的元素不參與彈性佈局。（脫標）
2、彈性盒子的宣告
- 宣告定義：
使用display：flex或display：inline-flex 宣告一個容器為彈性盒子。這個容器中的子元素們，會遵循彈性佈局。
【注】
1、 （給容器定義為彈性盒子後，彈性盒子內的子元素會自動從左向右橫向排列。）
2、一般是使用display:flex。 inline-flex極少用。flex:如果沒有為父元素設定寬，則父寬預設為100%；
inline-flex：如果沒有為父元素設定寬，則父寬預設為所有子元素的寬的和。
3、彈性盒子的屬性（父元素的屬性）
（1）、flex-direction
- flex-direction： 用於設定彈性盒子中的子元素的排列方向。（水平方向排列還是垂直方向排列）
- 屬性值：
row 從左到右水平排列子元素（預設值）
column 從上往下垂直排列子元素
row-reverse 從右到左排列子元素
column-reverse 從下往上垂直排列子元素
（2）、 flex-wrap
- flex-wrap： 規定flex容器是單行還是多行，是否換行。
nowrap:不換行（預設值）。即單行，該情況下，flex子項可能會容器。wrap：換行
wrap-reverse 反向換行。
（3）、 flex-flow
flex-flow： 是flex-direction與flex-wrap的組合寫法。
flex-flow:flex-direction屬性值 flex-wrap屬性值；
（4）、 justify-content
- justify-content：用於控制彈性元素在主軸上的排列方式。
（主軸方向可能是橫向或縱向） - 當主軸方向是橫向時（即flex-direction值為row時）
flex-start ：左對齊 。（預設值）-------------------元素緊靠主軸的起點
flex-end ：右對齊。----------------------------------- 元素緊靠主軸的終點。
center ：居中對齊。-----------------------------------元素在主軸上居中。
space-between 兩端對齊，專案之間間隔相等。--------------------------第一個元素緊靠起點，最後一個元素緊靠終點，餘下的元素平均分配剩餘空間。
space-around ：每個元素兩側的間隔相等。---------元素之間的間隔比元素與容器邊框的間隔要大一倍。
space-evenly 。元素間距平均分配。 - 圖例·：
1、 flex-start ：左對齊
2、 flex-end ：右對齊
3、center ：居中對齊
4、space-between 兩端對齊
5、space-around
6、space-evenly
（5）、 align-items
-
align-items：控制元素在側軸上的排列方式。
多行單行都適用的屬性。 -
屬性值：
flex-start 從側軸開始的地方對齊（預設值）
flex-end 從側軸結束的地方對齊
center 中間對齊
stretch 拉伸 。當子元素沒有設定側軸方向上的寬/高時，等於父盒子的寬或高。 -
圖例：
1、flex-start
2、flex-end
3、center
4、stretch
（6）、align-content
- align-content： 控制元素在側軸上的排列方式。
只適用於多行顯示的彈性容器。
flex-start ： 元素緊靠行的起點
flex-end ：元素緊靠行的終點
center ： 元素在行中居中
stretch ： 拉伸
space-between ：第一個元素緊靠行的起點，最後一個元素緊靠行的終點，餘下元素平均分配剩餘空間
space-around ：元素在側軸方向上的間隔相等。
space-evenly ：元素間距離平均分配
（7）、align-self（彈性元素的屬性，設定子元素）
- 彈性元素：
不要再去設定float。
設定完絕對定位後，該元素就不再是彈性元素了，不參與彈性佈局。（絕對定位後會脫標）
彈性元素均為塊級元素。 - align-self： 用於控制單個元素在側軸上的排列方式。
- 屬性值：
flex-start
flex-end
center
stretch 拉伸
<title>Document</title>
<style>
.father{
width: 300px;
height: 300px;
margin: 0 auto ;
margin-top: 50px;
border: 1px solid seagreen;
display: flex;
flex-flow: row wrap;
}
.son{
width: 100px;
height: 100px;
background-color: sienna;
background-clip: content-box;
box-sizing: border-box;
font-size: 30px;
line-height: 100px;
text-align: center;
}
.son:nth-child(4){
/* align-self: flex-end; */
}
</style>
</head>
<body>
<div class="father">
<div class="son">1
</div>
<div class="son">2
</div>
<div class="son">3
</div>
<div class="son">4
</div>
</div>
</body>
當不給第四個子元素align-self：flex-end時，所有子元素會遵循彈性盒子的設定（橫向排列，換行）
當再單獨給第四個子元素設定align-self：flex-end時，執行結果如下圖：
4、彈性盒子空間分配（設定給彈性元素）
（1） flex-grow
flex-grow：用於將彈性盒子的可用空間，按照比例分配給彈性元素。
<style>
.father{
width: 400px;
height: 300px;
margin: 0 auto ;
margin-top: 50px;
border: 1px solid seagreen;
display: flex;
flex-flow: row wrap;
}
.son{
width: 100px;
height: 100px;
background-color: sienna;
background-clip: content-box;
box-sizing: border-box;
font-size: 30px;
line-height: 100px;
text-align: center;
flex-grow: 1;
}
.son:nth-child(2){
background-color: cadetblue;
flex-grow: 2;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1
</div>
<div class="son">2
</div>
<div class="son">3
</div>
</div>
</body>
上面程式碼
1、顯示彈性盒子總寬400px。
2、三個彈性元素寬各100px。則剩餘可分配空間為100px。
3、三個彈性元素剩餘空間的可分配比例為1:2:1。
計算得知：
1、第一個彈性盒子可分配的寬度為100px/41=25px
最終寬度為100px+25px=125px
2、第二個彈性盒子可分配的寬度為100px/42=50px
最終寬度為100px+50px=150px
3、第三個彈性盒子可分配的寬度為100px/4*1=25px
最終寬度為100px+25px=125px
（2） flex-shrink
flex-shrink： 在彈性盒子裝不下子元素時，對子元素縮小的比例設定。
<style>
.father{
width: 200px;
height: 300px;
margin: 0 auto ;
margin-top: 50px;
border: 1px solid seagreen;
display: flex;
flex-flow: row nowrap;
}
.son{
width: 100px;
height: 100px;
background-color: sienna;
background-clip: content-box;
box-sizing: border-box;
font-size: 30px;
line-height: 100px;
text-align: center;
flex-grow: 1;
}
.son:nth-child(2){
width: 80px;
background-color: cadetblue;
flex-shrink: 2;
}
</style>
</head>
<body>
<!-- flex-shrink
在彈性盒子裝不下子元素時，對子元素縮小的比例設定。
1.計算缺少的值。
2.當前元素應該縮小比例：80*2/(100*1+80*2+100*1)=44.4%
3.應該縮小的值：缺少的值*縮小的比例=80*44.4%=35.6px
4.最終尺寸：缺少的值-應該縮小的值 80-35.6=44.4px；
-->
<div class="father">
<div class="son">1
</div>
<div class="son">2
</div>
<div class="son">3
</div>
</div>
</body>
程式碼顯示資訊
1、彈性盒子總寬200px。
2、彈性元素1與彈性元素3寬各100px，彈性元素2寬80px。彈性盒子缺少的寬度為80px。
3、彈性元素2的flex-shrink值為2.彈性元素1與3flex-shrink預設為1.
計算得知：
1、則彈性元素2應縮小比例：802/(1001+802+1001)=44.44%
2、彈性元素2應縮小的值：缺少的值縮小的比例=8044.44%=35.55px
3、彈性元素2最終寬度：缺少的值-應該縮小的值 80-35.55=44.45px
4、彈性元素1與3的最終寬度
（1）彈性元素1與3的的應縮小比例：1001/（1001+802+1001）=27.78%
（2）彈性元素1與3的的應縮小值， 缺少的值縮小的比例 80px27.78=22.22px
（3）彈性元素1與3的最終寬度：100px-22.22px=77.78px
（3） flex-basis
flex-basis：大部分情況下與寬度相等。優先順序比寬要高。定義了元素在主軸上的空間。
（4） 複合寫法
複合寫法：
flex：flex-grow flew-shrink flex-basis
（5）屬性order
order:
用於控制彈性元素的位置。預設為0，數值越小越靠前。
<style>
.father{
width: 300px;
height: 300px;
margin: 0 auto ;
margin-top: 50px;
border: 1px solid seagreen;
display: flex;
flex-flow: column nowrap;
}
.son{
width: 100px;
height: 100px;
background-color: sienna;
background-clip: content-box;
box-sizing: border-box;
font-size: 30px;
/* line-height: 100px; */
text-align: center;
}
.son:nth-child(2){
width: 100px;
background-color: cadetblue;
flex-basis: 80px;
/* flex: 2 1 80px; */
/*
flex-grow:2;
flex-shrink:1;
flex-basis:80px;
*/
order: -2;
}
</style>
</head>
<body>
<!-- flex-basis
大部分情況下與寬度相等。優先順序比寬要高。定義了元素在主軸上的空間。
複合寫法：
flex：flex-grow flew-shrink flex-basis
order:
用於控制彈性元素的位置。預設為0，數值越小越靠前。
-->
<div class="father">
<div class="son">1
</div>
<div class="son">2
</div>
<div class="son">3
</div>
</div>
</body>
彈性元素2的order值為-2，位置跑到最前面。