彈性盒模型

1、彈性盒模型

　　1.display：flex

　　　　說明：設置爲彈性盒（父元素添加）

　　　　　　　要讓一個元素變成伸縮容器，須要使用display屬性。

　　　　　　　採用flex佈局的元素，稱爲伸縮容器(flex container)，容器內的子元素稱爲伸縮項目(flex item)

　　　　注意：瀏覽器會將任何直接在伸縮容器裏的連續文字塊包起來，成爲匿名伸縮項目；

　　　　　　　使用flex佈局實現上是使元素FFC化(flex formatting context伸縮格式化上下文)，FFC是普通流的一種；

　　　　　　　而浮動流和定位流以及CSS其餘屬性對FFC是有影響的，主要表如今如下幾點:

　　　　　　　　1）float、clear和vertical-align屬性在伸縮項目上沒有效果

　　　　　　　　2）伸縮容器的margin與其內容的margin不會重疊

　　　　　　　　3）text-align屬性在伸縮容器上沒有效果，由於其只可應用於塊級block容器

　　　　　　　　4）另外，columns屬性伸縮容器上沒有效果

　　　　　　彈性盒模型的兩種容器塊級伸縮容器和內聯伸縮容器的區別相似於block和inline-block的區別，一個獨佔一行，另外一個非獨佔一行

　　2.flex-direction（主軸排列方式）

　　　　說明：順序指定了彈性子元素在父容器中的位置

　　　　　　　row：默認橫向一列內排行

　　　　　　　row-reverse：反向橫向排列（右對齊，從後往前排，最後一項排在最前面）

　　　　　　　column：縱向排列

　　　　　　　column-reverse：反向縱向排列，從下往上排，最後一項排在最上面

　　3.justify-content（主軸對齊方式）

　　　　說明：內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊

　　　　　　　flex-start默認，頂端對齊

　　　　　　　flex-end末端對齊

　　　　　　　center居中對齊

　　　　　　　space-between兩端對齊，中間自動分配

　　　　　　　space-around自動分配距離

　　4.align-items（側軸對齊方式）

　　　　說明：flex-start：彈性盒子元素的側軸起始位置的邊界緊靠住該行的側軸其實邊界

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

　　　　　　　center：彈性盒子元素在該行的側軸上居中放置；（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）

　　　　　　　baseline：若是彈性盒子元素的行內軸與側軸同爲一條，則該值與「flex-start」等效，其餘狀況下，該值將參與基線對齊

　　5.flex-wrap

　　　　說明：該屬性控制flex容器爲單行或者多行，同時橫軸的方向決定了新行堆疊方向

　　　　　　　nowrap：flex容器爲單行，該狀況下flex子項可能會溢出容器

　　　　　　　wrap：flex容器爲多行，該狀況下flex子項溢出的部分會被放置到新行，子項內部會發生斷行

　　　　　　　wrap-reverse：反轉wrap排列

　　6.align-content（航宇行之間的對齊方式）

　　　　說明：當伸縮容器的側軸還有多餘空間時，。本屬性能夠用來調整伸縮行在容器裏的對齊方式，這與調準整縮項目在主軸上對齊方式的<"justify-content">屬性相似；注意本屬性在只有一行的伸縮容器上是沒有效果的

　　　　　　　flex-start沒有行間距

　　　　　　　flex-end底對齊沒有行間距

　　　　　　　center居中沒有行間距

　　　　　　　space-between兩端對齊，中間自動分配

　　　　　　　space-around自動分配距離

　　7.align-self（加給子元素）

　　　　說明：align-self屬性規定靈活容器內被選中項目的對齊方式

　　　　　　　注意：align-self屬性可重寫靈活容器的align-items屬性

　　　　　　　auto默認值，元素屬性繼承了它父元素的align-items屬性；若是沒有父容器則爲「stretch」；

　　　　　　　stretch元素被拉伸以適應容器

　　　　　　　center元素位於容器的中心

　　　　　　　flex-strat元素位於容器的開頭

　　　　　　　flex-end元素位於容器的結尾

　　　　　　　IE和Safari瀏覽器不支持align-self屬性

　　8.order

　　　　說明：number排序優先級，數字越大越日後排，默認爲0，支持負數

　　9.flex（flex-grow，flex-shrink，flex-basis）

　　　　說明：複合屬性，設置或檢索彈性盒模型對象的子元素如何分配空間；

　　　　　　　縮寫（flex：1；）則其計算值爲（1 1 0%）

　　　　　　　縮寫（flex：auto）則其計算值爲（1 1 auto）

　　　　　　　flex：none，則其計算值爲（0 0 auto）

　　　　　　　flex：0 auto；或者flex：initial；則其計算值爲（0 1 auto），即flex初始值

　　10.flex三個屬性介紹

　　　　flex-grow：一個數字，規定項目將相對於其餘靈活的項目進行擴展量

　　　　flex-shrink：一個數字，規定項目將相對於其餘靈活的項目進行收縮的量

　　　　flex-basis：項目的長度