1 flex-direction:指定了彈性容器中子元素的排列方式
row 橫向從左到右排列（左對齊），預設的排列方式
row-reverse 反轉橫向排列（右對齊，從後往前排，最後一項排在最前面
column 縱向排列
column-reverse 反轉縱向排列，從後往前排，最後一項排在最上面。
2 justify-content:設定彈性盒子元素在主軸（橫軸）方向上的對齊方式
flex-start:彈性專案向行頭緊挨著填充。這個是預設值。第乙個彈性項的main-start外邊距邊線被放置在該行
的main-start邊線，而後續彈性項依次平齊擺放;
flex-end:彈性專案向行尾緊挨著填充。第乙個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而
後續彈性項依次平齊擺放
center：彈性專案居中緊挨著填充。（如果剩餘的自由空間是負的，則彈性專案將在兩個方向上同時溢位）。
space-between：彈性專案平均分布在該行上。如果剩餘空間為負或者只有乙個彈性項，則該值等同於flex-
start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，
然後剩餘的彈性項分布在該行上，相鄰專案的間隔相等。
space-around：彈性專案平均分布在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有乙個彈性項
，則該值等同於center。否則，彈性專案沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留
有一半的間隔（1/2*20px=10px）
3 align-items 設定彈性盒子元素在側軸（縱軸）方向上的對齊方式
flex-start：以父top left為起始邊界》 彈性盒子元素的y軸（縱軸）起始位置的邊界緊靠住該行的y軸起始邊界。
flex-end：以父bottom left 為起邊界》彈性盒子元素的y軸（縱軸）起始位置的邊界緊靠住該行的y軸結束邊界。
center：以父垂直具中》彈性盒子元素在該行的y軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向
兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基
線對齊。
stretch： 如果指定y軸【height】大小的屬性值為'auto'，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但
同時會遵照'min/max-width/height'屬性的限制。
4 flex-wrap 設定彈性盒子的子元素超出父容器時是否換行
nowrap - 預設， 彈性容器為單行。該情況下彈性子項可能會溢位容器。
wrap - 彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行
wrap-reverse -反轉 wrap 排列。
5 align-content 修改 多行flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，多個item 看成一行 而是設定行對齊
stretch - 預設。各行將會伸展以占用剩餘的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分布。
space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
6 彈性子元素屬性排序
order: 1（在最後面） -1（在最前面）
7 margin：auto ，自動獲取彈性容器中剩餘的空間。所以設定垂直方向margin值為"auto"，可以使彈性子元素在彈性容器
的兩上軸方向都完全居中
argin: auto; 可以使得彈性子元素在兩上軸方向上完全居中
8 align-self 在彈性子元素上使用。子元素相對父元素容器顯示 [覆蓋容器的 align-items 屬性]
auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，
則計算值為'stretch'。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向
兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基
線對齊。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但
同時會遵照'min/max-width/height'屬性的限制。
9 flex 設定彈性盒子的子元素如何分配空間
auto: 計算值為 1 1 auto
initial: 計算值為 0 1 auto
none：計算值為 0 0 auto
inherit：從父元素繼承
[ flex-grow ]：定義彈性盒子元素的擴充套件比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的預設基準值。
css3彈性盒子布局
彈性布局分為兩部分 1.語法是新增到父容器上的 display flex 想要做彈性布局一定要寫這句話 flex direction 布局的排列方向 主軸排列方向 row 預設值，顯示為行。方向為當前文件流水平方向，預設情況下是從左往右 row reverse 顯示為行。但方向和row屬性值是反的 ...
Css3響應布局 彈性盒子
彈性盒子 flexbox 組成 彈性容器 flex container 和彈性子元素 flex item 1 彈性容器 flex container display flex inline flex 內部包含乙個或多個彈性子元素 注意 設定為彈性容器後，子元素的float clear vertica...
css3彈性盒子（flex布局）
寫在容器上 容器屬性 flex direction 定義內部的排列方向 確定主軸 值 1 row 預設，水平方向，從左到右 2 row reverse 水平方向，從右到左 3 column 顯示為列，垂直方向 從上到下 4 column reverse 顯示為列，垂直方向 從下到上 justify ...