常見的父項屬性
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.
