flex佈局 任何一個容器都可以指定為flex佈局 當父盒子設為flex佈局後，子元素的float、clear、vertical-align屬性將失效 伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局 採用flex的元素，稱為Flex容器（flex container）簡稱”容器“。 它的所 ...
flex佈局
任何一個容器都可以指定為flex佈局
當父盒子設為flex佈局後，子元素的float、clear、vertical-align屬性將失效
伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局
採用flex的元素，稱為Flex容器（flex container）簡稱”容器“。
它的所有子元素自動成為容器成員，成為Flex項目（flex item）簡稱“項目”
啟用flex佈局：給標簽加上樣式：display:flex;
常見的父項屬性：
1、flex-direction設置主軸方向
flex佈局，分為主軸和側軸方向也稱行和列、x軸和y軸
預設主軸方向就是x方向，水平向右
預設側軸方向就是y方向，水平向下
元素跟著主軸排列
屬性值：row：預設，為水平方向,相當於float:left
row-reverse：水平反方向，相當於float:right，即從右到左
column：垂直方向，即從上到下
column-reverse：垂直反方向，即從下到上
2、justify-content 設置主軸上的子元素排列方式
使用該屬性之前一定要確定好主軸方向
屬性值：flex-start：預設值，從頭部開始，如果主軸是x軸，則從左到右；如果主軸是Y軸，則從上到下
flex-end：從尾部開始排列，如果主軸是x軸，則子元素貼著右邊，但是順序不變 ，如果主軸是y軸，子元素就貼著下邊
center：在主軸居中對齊（如果主軸是X軸則水平居中）
space-around：平分剩餘空間，平分父元素的空間，每個子元素之間的間距一樣
space-between：先兩邊貼邊，再平分剩餘空間：父元素裡面的子元素兩邊貼著邊緣，剩餘的子元素平分剩下的空間
3、flex-wrap 設置子元素是否換行
預設情況下，子元素是不換行的，如果父元素一行裝不下，會縮小子元素的寬度，放到父元素空間裡面。
屬性值：nowrap：預設值，不換行
wrap：換行
4、align-items設置側軸（預設側軸為y軸）上的子元素排列方式（單行）
設置子項在側軸上的排列順序，用於子元素是單行的情況下，即子元素不換行
屬性值：flex-start：預設值，從側軸的頭部開始排列
flex-end：從側軸的尾部開始排列
center：在側軸中垂直居中顯示
stretch：拉伸：如果子元素設置高度，設置stretch就沒有變化，只有當子元素沒有設置高度或者高度等於auto時，子元素的高度會被拉伸到和父元素一樣高
baseline：各個Flex Item相對於基線對齊。
A .若Flex Item內部沒有任何文本內容，則Flex Item在Flex Container的頂端 且各個Flex Item之間底部對齊。 B .若Flex Item內部具備文本內容，則各個Flex Item相對於文本基線對齊
5、align-content 設置側軸上的子元素的排列順序（多行）
設置子項在側軸上的排列順序，只能用於多行的情況下，即子元素換行，在單行情況下沒有效果
屬性值：flex-start：預設值，從側軸的頭部開始排列
flex-end：從側軸的尾部開始排列
center：在側軸中垂直居中顯示
space-around：子項在側軸平分剩餘空間
space-between：子項在側軸先分佈在兩頭，再平分剩餘空間
stretch：設置子項元素高度平分父元素高度，跟單行效果差不多。如果子元素設置高度，設置stretch就沒有變化，只有當子元素沒有設置高度或者高度等於auto時，子元素才會平分父元素的高度
*****註意align-items和align-content的區別
flex-flow屬性是flex-direction和flex-wrap屬性的複合屬性，相當於flex-direction和flex-wrap的簡寫
例如：flex-flow:row wrap;
子項常見屬性
1、flex屬性
定義子項目分配剩餘空間，用flex來表示占多少份數
flex: <number>; // flex 的值是數字
flex:1;
2、align-self控制子項自己在側軸的排列方式
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可以覆蓋align-items屬性
例如：align-self:flex-end;
3、order屬性定義子項的排序順序（前後順序）
數值越小，排列越靠前，預設值為0
例如order: -1;
