彈性盒佈局

彈性盒子是CSS3的一種新的佈局方式。
引入彈性盒子佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空間。

設置彈性盒子

.box {
    display:flex;//塊級元素
    display：inline-flex;//行內元素
}

注意：設置Flex佈局以後，子元素的float、clear和vertical-align屬性將失效

• 特點

1. 子元素默認橫向佈局，此時默認橫軸爲主軸，縱軸叫做交叉軸。
2. 子元素默認繼承父元素高度。
3. 子元素寬度默認由內容撐開。
4. 子元素的寬度總和大於父元素的寬度，子元素自動收縮。

彈性盒子屬性

flex-direction：（設置主軸的方向，他有以下四個值）

• row（默認值）：主軸爲水平方向，起點在左端。
• row-reverse：主軸爲水平方向，起點在右端。
• column：主軸爲垂直方向，起點在上沿。
• column-reverse：主軸爲垂直軸，起點在下沿。

justify-content：（設置主軸對齊方式，他有以下五個取值）

具體對齊方式與主軸方向有關有關，下面假設主軸從左到右

• flex-start（默認值）：左對齊。
• flex-end：右對齊。
• center：居中對齊。
• space-between（常用）：兩端對齊，項目之間的間距都相等。
• space-around：每個項目兩側的間距都相等。所以，項目之間的間隔比項目與邊框的距離大一倍。

align-items：（設置項目在交叉軸上的對齊方式，他有以下五個取值）

具體對齊方式與交叉方向有關有關，下面假設交叉軸從上到下

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center ：交叉軸終點對齊。
• baseline：項目的第一行文字的基線對齊。
• stretch（默認值）：如果項目未設置高度或者寬度設爲atuo，將佔滿整個容器。

項目的屬性

order
order屬性用整數值來定義排列順序。數值越小，排列越靠前，默認爲0，可以爲負值。

align-item：（設置或檢索彈性盒子元素在縱軸方向的對齊方式）
取值參考彈性盒子align-item值。

flex：
flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
詳情參考這裏