轉眼寫小程序已經大半個月了，發現flex是真的好用，非常方便，既能快速的布局，也能有自適應的效果，下面列舉我常用到的一些屬性。（標紅為常用）
用在父元素中：
1.首先，在父元素里添加上display：flex屬性，默認情況每個容器只有一行。
2. flex-direction屬性，定義了方向： 方向
- row：橫向從左到右排列（左對齊），默認的排列方式。//橫向排列
- row-reverse：反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。
- column：縱向排列。
- column-reverse：反轉縱向排列，從后往前排，最后一項排在最上面
3.justify-content屬性，沿主軸線對齊： 空間
- flex-start：緊挨着頭，左對齊
- flex-end：緊挨着尾巴，右對齊
- center：居中
- space-between：中間空白間隔相等，常用在我需要子元素在父元素的最左邊和最右邊排列的時候
- space-around：相當於space-between的兩邊留有一半的間隔空間（space-between頂格），如果剩余空間為負或者只有一個彈性項，則該值等同於center
效果如截圖（來自菜鳥教程）：
4.align-items屬性，設置在縱軸上的對齊方式： 縱向
- flex-start：頂格，頂天花板上
- flex-end：頂地
- center：縱向居中 ，我常用在flex子元素需要他們在一條直線上的時候
- baseline：如彈性盒子元素的行內軸與縱軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
- stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
5.flex-wrap屬性，換行方式： 換行
- nowrap： 默認， 彈性容器為單行。該情況下彈性子項可能會溢出容器。
- wrap： 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
- wrap-reverse： 反轉 wrap 排列。
6.align-content屬性，用法參考align-items，設置行對齊。
用在子元素中：
7. order：排序，用整數值來定義排列順序，數值小的排在前面。可以為負值。
8.在子元素中：設置"margin"值為"auto"值，自動獲取彈性容器中剩余的空間。所以設置垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全居中。
9.align-self：子元素自身在縱軸的對齊方式，參考align-items （可以用來讓子元素在同一父元素內在縱軸上占不同位置）。
10.flex：number，在不同子元素內設置這個數，可以按比率分配空間
ps：行內元素垂直居中用 line-height =行高height
補充：flex中元素居中方式：
1.如上：在父元素用display：flex，子元素margin:auto
2.在父元素中 display: flex; align-items: center;.justify-content：center；
參考：菜鳥教程