超詳細彈性盒子佈局

一、彈性盒子中的彈性子元素默認是進行一行展現的，從左到右；

 

二、父元素屬性：display：flex；—— 是設置父元素成爲一個彈性盒子；裏邊的子元素符合彈性佈局；

 

三、給父元素設置direction：rtl；—— 是能夠改變彈性佈局的，改成從右到左開始，裏邊的子元素也是從右到左進行排列的；

 

四、flex-direction屬性：指定了彈性子元素在父容器中的位置

    屬性值：row（inherit、initial、unset）：默認排列；

            row-reverse：反轉橫向排列，子元素從右向左依次排列；和direction：rtl的效果一致；

            column：縱向排列，一個子元素佔單獨的一行；

            column-reverse：反轉縱向排列，子元素默認從下往上排列，最後一個元素在最上邊；

 

五、justify-content屬性：設置彈性子元素在主軸線上的排列方式

    屬性值：flex-start：默認排列；從左向右開始，

            flex-end：子元素反轉橫向排列，排列順序從右向左；

            center：子元素全局居中排列；

            space-around：子元素水平均勻分佈在一行，父元素內部左右兩邊都有間隔空間；但若是剩餘空間爲負或者只有一個彈性項，則該值等同於center；

            space-between：子元素平均分佈在一行，但父元素內部左右兩邊都沒有間隔空間，最左最右邊的子元素都是頂邊排列的；若是剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start；

 

六、align-items屬性：設置彈性子元素在縱軸上的排列方式

    屬性值：flex-start（baseline、stretch）：彈性子元素默認排列；

            flex-end：彈性子元素從下往上依次排列；最後一個元素在最上邊排列；

            center：全局彈性子元素在縱軸上居中展現；若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度；

 

七、flex-wrap屬性：指定彈性盒子的子元素換行方式

    屬性值：nowrap：默認，彈性容器爲單行，該狀況下彈性子元素可能會溢出容器；

            wrap：彈性容器爲多行，該狀況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行（適用於父元素中包裹多個子元素的狀況，若是父元素中只有一個則仍是默認的排列方式，並不會進行斷行展現）；

            wrap-reverse：反轉wrap排列；原來排列在最後一行的轉到第一行進行展現，可是每一行中的子元素是不會進行從新排序展現的；

 

八、align-content屬性：修改flex-wrap屬性的行爲，相似於align-items，但它不是設置 彈性子元素的對齊，而是設置各行的對齊

    屬性值： stretch：默認，各行將會伸展以佔用剩餘的空間；

            flex-start：各行向彈性容器的起始位置堆疊；

            flex-end：各行向彈性容器的結束位置堆疊；

            center：各行向彈性盒容器的中間位置堆疊；

            space-between：各行在彈性盒容器中平均分佈；

            space-around：各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半；

 

九、彈性子元素屬性order：設置彈性容器內彈性子元素的屬性

    屬性值：用整數來定義排列順序，數值小的排在前面，能夠爲負值；

 

十、當父元素設置了彈性佈局後，想讓子元素水平垂直居中，則能夠直接給子元素設置margin：auto便可；

 

十一、align-self屬性：設置彈性元素自身在側軸（縱軸）方向上的對齊方式

    屬性值：auto：計算值爲元素的父元素的align-items值，若是其沒有父元素，則計算值爲stretch；

            flex-start（baseline）：彈性盒子元素的縱軸起始位置的邊界緊靠住該行的起始邊界；

            flex-end：彈性盒子元素的縱軸起始位置邊界緊靠住該行的側軸結束邊界；

            center：彈性盒子元素在該行的側軸上居中放置

 

十二、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佈局：