彈性盒子flex

基本概念

彈性盒子與彈性元素
彈性盒子：指的是使用display：flex或display：inline-flex宣告的容器。
彈性元素：指的是彈性盒子中的子元素。

主軸與側軸（交叉軸）
主軸方向：為子元素排列的方向。可以通過flex-direction改變。
側軸方向：與主軸方向垂直，為子元素的換行方向。可以通過flex-wrap改變。
彈性元素：
不要再去設定float。（彈性盒子內的彈性元素是不脫標的）
設定完絕對定位後，該元素就不再是彈性元素了，不參與彈性佈局。
彈性元素均為塊級元素。
【注】
1.文字節點也可以被彈性佈局操作。

2.絕對定位的元素不參與彈性佈局。

宣告定義

使用display：flex或display：inline-flex 宣告一個容器為彈性盒子。這個容器中的子元素們，會遵循彈性佈局。
【注】一般是使用display:flex. inline-flex極少用。
flex:如果沒有為父元素設定寬，預設為100%；
inline-flex：如果沒有設定寬，，預設為所有子元素的寬的和。

flex-direction

用於設定盒子中的子元素的排列方向。
row 從左到右水平排列子元素（預設值）
column 從上往下垂直排列子元素
row-reverse 從右到左排列子元素
column-reverse 從下往上垂直排列子元素

flex-wrap

規定flex容器是單行還是多行，是否換行
nowrap:不換行（預設值）
wrap：換行
wrap-reverse 反向換行。
在側軸方向排列

在主軸方向排列

flex-flow

是flex-direction與flex-wrap的組合寫法。
flex-flow:flex-direction flex-wrap；

align-items

控制元素在側軸上的排列方式。
多行單行都適用的屬性。
flex-start 從側軸開始的地方對齊
flex-end 從側軸結束的地方對齊
center 中間對齊

stretch 拉伸 沒有設定側軸方向上的寬/高時，等於父盒子的寬或高。

align-content

控制元素在側軸上的排列方式。只適用於多行顯示的彈性容器。
stretch 拉伸
flex-start 元素緊靠行的起點
flex-end 元素緊靠行的終點
center 元素在行中居中
space-between 第一個元素緊靠行的起點，最後一個元素緊靠行的終點，餘下元素平均分配剩餘空間
space-around 元素在側軸方向上的間隔相等。
space-evenly 元素間距離平均分配

justify-content

控制元素在主軸上的排列方式。只適用於多行顯示的彈性容器。
stretch 拉伸
flex-start 元素緊靠行的起點 預設值
flex-end 元素緊靠行的終點
center 元素在行中居中

space-between 第一個元素緊靠行的起點，最後一個元素緊靠行的終點，餘下元素平均分配剩餘空間
space-around 元素在側軸方向上的間隔相等。
space-evenly 元素間距離平均分配

align-self

用於控制單個元素在側軸上的排列方式。
stretch 拉伸
flex-start
flex-end
center

flex-grow

用於將彈性盒子的可用空間，按照比例分配給彈性元素。

flex-shrink

在彈性盒子裝不下子元素時，對子元素縮小的比例設定。
1.計算缺少的值。
2.當前元素應該縮小比例：802/(1001+802+1001)=44.4%
3.應該縮小的值：缺少的值縮小的比例=8044.4%=35.6px
4.最終尺寸：缺少的值-應該縮小的值 80-35.6=44.4px；

flex-basis

大部分情況下屬性效果等同於寬度。優先順序比寬要高。定義了元素在主軸上的空間。

複合寫法：
flex：flex-grow flew-shrink flex-basis

order

用於控制彈性元素的位置。預設為0，數值越小越靠前。