1、彈性盒子中的彈性子元素默認是進行一行展示的，從左到右；
2、父元素屬性：display：flex；—— 是設置父元素成為一個彈性盒子；里邊的子元素符合彈性布局；
3、給父元素設置direction：rtl；—— 是可以改變彈性布局的，改為從右到左開始，里邊的子元素也是從右到左進行排列的；
4、flex-direction屬性：指定了彈性子元素在父容器中的位置
屬性值：row（inherit、initial、unset）：默認排列；
row-reverse：反轉橫向排列，子元素從右向左依次排列；和direction：rtl的效果一致；
column：縱向排列，一個子元素占單獨的一行；
column-reverse：反轉縱向排列，子元素默認從下往上排列，最后一個元素在最上邊；
5、justify-content屬性：設置彈性子元素在主軸線上的排列方式
屬性值：flex-start：默認排列；從左向右開始，
flex-end：子元素反轉橫向排列，排列順序從右向左；
center：子元素全局居中排列；
space-around：子元素水平均勻分布在一行，父元素內部左右兩邊都有間隔空間；但如果剩余空間為負或者只有一個彈性項，則該值等同於center；
space-between：子元素平均分布在一行，但父元素內部左右兩邊都沒有間隔空間，最左最右邊的子元素都是頂邊排列的；如果剩余空間為負或者只有一個彈性項，則該值等同於flex-start；
6、align-items屬性：設置彈性子元素在縱軸上的排列方式
屬性值：flex-start（baseline、stretch）：彈性子元素默認排列；
flex-end：彈性子元素從下往上依次排列；最后一個元素在最上邊排列；
center：全局彈性子元素在縱軸上居中展示；如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度；
7、flex-wrap屬性：指定彈性盒子的子元素換行方式
屬性值：nowrap：默認，彈性容器為單行，該情況下彈性子元素可能會溢出容器；
wrap：彈性容器為多行，該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行（適用於父元素中包裹多個子元素的情況，如果父元素中只有一個則還是默認的排列方式，並不會進行斷行展示）；
wrap-reverse：反轉wrap排列；原來排列在最后一行的轉到第一行進行展示，但是每一行中的子元素是不會進行重新排序展示的；
8、align-content屬性：修改flex-wrap屬性的行為，類似於align-items，但它不是設置 彈性子元素的對齊，而是設置各行的對齊
屬性值： stretch：默認，各行將會伸展以占用剩余的空間；
flex-start：各行向彈性容器的起始位置堆疊；
flex-end：各行向彈性容器的結束位置堆疊；
center：各行向彈性盒容器的中間位置堆疊；
space-between：各行在彈性盒容器中平均分布；
space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半；
9、彈性子元素屬性order：設置彈性容器內彈性子元素的屬性
屬性值：用整數來定義排列順序，數值小的排在前面，可以為負值；
10、當父元素設置了彈性布局后，想讓子元素水平垂直居中，則可以直接給子元素設置margin：auto即可；
11、align-self屬性：設置彈性元素自身在側軸（縱軸）方向上的對齊方式
屬性值：auto：計算值為元素的父元素的align-items值，如果其沒有父元素，則計算值為stretch；
flex-start（baseline）：彈性盒子元素的縱軸起始位置的邊界緊靠住該行的起始邊界；
flex-end：彈性盒子元素的縱軸起始位置邊界緊靠住該行的側軸結束邊界；
center：彈性盒子元素在該行的側軸上居中放置
12、flex復合屬性：指定彈性子元素如何分配空間
- 如果縮寫為flex：1，則其計算屬性值為[ 1 1 auto ]
- 如果縮寫為flex：auto，則其計算值為[ 1 1 auto ]
- 如果縮寫為flex：none，則其計算值為[ 0 0 auto ]
- 如果縮寫為flex： 0 auto 或者flex：initial，則其計算值為[0 1 auto]，即flex初始值
flex-content布局：
