夜靈的Html筆記Day11——彈性盒子佈局

3、彈性佈局
1、什麼是彈性佈局
彈性佈局(Flexible box)，簡稱爲 ：flex佈局。指定某元素中的子元素的排列布局方式。
彈性佈局容器：簡稱 "容器"，使用彈性佈局屬性的元素，其子元素能夠按照彈性佈局的方式進行排列
彈性佈局項目：簡稱 "項目"，彈性佈局容器中的子元素，允許按照彈性佈局的方式進行排列


語法：
屬性：display
取值：
1、flex
作用：將塊級元素設置爲彈性佈局的容器
2、inline-flex
作用：將行內元素設置爲彈性佈局的容器
注意：
1、元素設置爲flex佈局後，子元素的float,cleart,vertical-align,text-align全部失效
2、容器中的項目，允許直接修改尺寸
3、容器中的項目，外邊距合併問題被解決
2、容器屬性
將屬性設置給容器元素，從而實現所有子元素的排列布局方式
1、flex-direction
作用：決定主軸以及項目在主軸上的排列方向
取值：
1、row:主軸爲水平方向的軸，起點在左端，默認值
2、row-reverse
主軸爲水平方向的軸，起點在右端
3、column(重點)
主軸 更改爲 交叉軸，起點在上端
4、column-reverse
主軸 更改爲 交叉軸，起點在底端
2、flex-wrap
作用：默認情況下，項目們都在一條線上排列(軸線)，如果 項目們 在一條軸線上排不下時，如何換行
取值：
1、nowrap
默認值，不換行,但是會縮放項目
2、wrap
換行
3、wrap-reverse
換行，第一行在下方
3、flex-flow
作用：flex-direction 和 flex-wrap 的縮寫
取值：
row nowrap : 默認值
direction wrap ;
4、justify-content(重點)
作用：指定項目在主軸上的對齊方式
注意：
如果主軸爲橫軸,則指定橫向的排列對齊方式
如果主軸爲交叉軸,則指定縱向排列對齊方式
取值：
1、flex-start
在軸的起點對齊
2、flex-end
在軸的終點對齊
3、center
居中對齊
4、space-between(終點)
兩端對齊，項目之間的間隔都相等
5、space-around
每個項目兩側的間隔是相等的
5、align-items
作用：定義項目在交叉軸上如何對齊
取值：
1、flex-start
交叉軸的起點對齊
2、flex-end
交叉軸的終點對齊
3、center
交叉軸的中間對齊
4、baseline
基線對齊，以最大的文本第一行的基線爲準
5、stretch
默認值，如果項目未設置高度或高度爲auto的話， 將佔滿整個容器的高度
6、align-content
作用：該屬性定義項目們有多跟軸線時的對齊方式(僅在項目自動換行時有效)
取值：
1、flex-start
在軸的起點對齊
2、flex-end
在軸的終點對齊
3、center
在軸的中間對齊
4、space-between
與軸的兩端對齊，軸線之間的間隔相等
5、space-around
每個軸線兩側的間隔相等
6、stretch
默認值，佔滿軸線 
3、項目屬性
1、order
作用：排序,取值越小，排列越靠前。默認值爲 0
取值：整數數字
2、flex-grow(重點)
作用：父元素有剩餘空間的條件下,定義項目放大比例,默認爲0,即便有剩餘空間，也不放大
取值：整數數字
3、flex-shrink
作用：父元素剩餘空間不足的情況下，定義了項目如何縮小即縮小比例，默認值爲1
取值：整數數字
ex:
如果一個項目的 flex-shrink 設置爲0，其它項目設置爲 1，如果空間不足時，如何排列？？
flex-shrink 爲0的元素 寬度不變，爲1的元素會縮小
4、flex-basis
作用：定義項目所佔據容器空間的大小(主軸)
取值：
1、auto
項目本身大小
2、具體數值
5、flex
作用：flex-grow flex-shrink flex-basis 的簡寫方式
取值：
1、auto 
等同於 1 1 auto;
2、none
等同於 0 0 auto;
3、grow[,shrink,basis]
6、align-self
作用：定義 自己 與其他項目不一樣的在交叉軸的對齊方式,可以覆蓋父元素的 align-items 屬性
取值:
1、auto
默認值，繼承父元素align-items的值,如果沒有父元素的話，則等同於stretch
2、flex-start
3、flex-end
4、center
5、baseline
6、stretch