新手小白非常适合的手機端常見布局，flex布局屬性詳解

常見的父項屬性

flex-direction：設定主軸的方向

flex-direction:屬性決定主軸的方向（即項目的排列方向）預設x軸為主軸
注意：主軸和側軸是會變化的，我們的子元素是跟着主軸排列的
flex-direction:row(預設值)|row-reverse(從右到左)|column（從上到下）| column-reverse(從下到上)
           

justify-content：設定主軸長的子元素排列方式

justify-content：屬性定義了項目在主軸上的對齊方式
注意：使用這個屬性之前一定要确定好主軸是哪個
屬性：justify-content：flex-start|flex-end|center|space-around|space-between
flex-start：預設值，從頭部開始，如果主軸是x軸，則從左到右
flex-end：從尾部開始排列
center：在主軸居中對齊，（如果主軸是x軸則水準居中）
space-around：平分剩餘空間
space-between:先兩邊貼邊，再平分剩餘空間（重要）
           

flex-wrap：設定子元素是否換行

flex-wrap:預設情況下項目都排在一條線上（主軸），如果排不下了會自動縮小，不管你有沒有設定寬度或者高度。
flex-wrap：nowrap（預設值，不換行）| wrap （換行）
           

align-content：設定側軸上的子元素的排列方式（多行，以主軸為參考）

align-content：設定子項在側軸上的排列方式并且隻能用于子項出現換行的情況（多行），在單行下是沒有效果的
屬性：
flex-start:預設值在側軸的頭部開始排列
flex-end:在側軸的尾部開始排列
center：在側軸的中間顯示
space-around：子項在側軸平分剩餘空間
space-between：子項在側軸先分布在兩頭，再平分剩餘空間
stretch：設定子項元素高度平分父元素高度
注意：這裡的多行是以主軸為參考的！！！
           

align-items：設定側軸上的子元素排列方式（單行，以主軸為參考）

align-items:該屬性是控制子項在側軸（預設是y軸）上的排列方式，在子項為單項的時候使用
align-items:flex-start(預設值，從上到下)|flex-end（從下到上）| center（擠在一起居中（垂直居中）） | stretch(拉伸，但是子元素不要給高度否則無效)
           

flex-flow：複合屬性，相當于同時設定了flex-direction和flex-wrap

flex-direction:column;
flex-wrap:wrap;
上面兩句話可以簡寫為：
flex-flow:column wrap;
           

常見的子項屬性

flex子項占的份數

flex屬性定義子項目配置設定剩餘空間，用flex來表示占多數份數
flex：數字; 
例如
flex：1;
           

align-self控制子項在自己側軸的排列方式

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆寫align-items屬性，預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素則等同于stretch
           

order屬性定義子項的排列順序（前後順序）

order 定義項目的前後排序，數值越小，排列約靠前，預設值為0.