[續更]一起來擼一下Flex佈局裡面的那些屬性

Flex的全稱是Flexible Box，意為彈性佈局，用來為盒模型提供最大的靈活性。

Flex包含的屬性有很多，每個屬性又包含了許多不同意義的屬性值···然而在實際開發中，能被我們臨幸的可能也只是那麼幾個：

{
    display: flex;
    justify-content: center|flex-start...;
    align-items: center|flex-start...;
    flex-grow: auto...;
}
複製程式碼

---

上面是一本正經的分割線！

一、Flex簡介

任何一個容器都可以通過設定 display 為 flex/inline-flex 將其指定為Flex佈局。對於設定了Flex佈局的容器，子元素的 float、clear、vertical-align 屬性將失效；但是，如果對這些子元素設定 position 定位，那麼Flex屬性的作用會失效，一張圖說明他們的作用權重：

採用Flex屬性佈局的元素稱為Flex容器，而其所有的子元素稱為Flex專案。容器預設存在兩根軸線：水平的主軸（main axis）和垂直的交叉軸（cross axis）。軸的起始和結束為止分別稱作main/cross start和main/cross end。專案預設沿主軸排列，專案佔據的軸的空間叫main/cross size。詳見下圖：

Flex佈局元素分為Flex容器和Flex專案，因而有Flex容器屬性和Flex專案屬性的區分。

二、Flex容器屬性

1. Flex的容器屬性包括：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1.1 flex-direction

該屬性定義了主軸的方向，即專案的排列方向。value的取值包括：row | row-reverse | column | column-reverse。其中 row 是預設值，表示水平方向排列（起點在左端）; column 表示垂直方向（起點在頂端）;帶 -reverse 的值則表示反方向。用法及其效果圖如下：

示例程式碼：

<div class="flex-box">
    <div class="flex-item">item1</div>
    <div class="flex-item">item2</div>
    <div class="flex-item">item3</div>
</div>
複製程式碼

.flex-box{
    display: flex;     /*定義為flex佈局*/
    flex-direction:row-reverse; /*主軸為水平方向，起點在右端*/
    background:orange;
}
.flex-item{
    margin:10px;
    height:100px;
    width:100px;
    background: purple;
    color:#fff;
}
複製程式碼

示例效果：

1.2 flex-wrap屬性

該屬性定義專案是否換行以及如何換行。在預設情況下，專案都排在一條軸線上，如果一條軸線排不下，瀏覽器就根據這個屬性的值對專案排列做相應調整。value的取值包括：nowrap | wrap | wrap-reverse，其中，nowrap 是預設值，不換行。用法及其效果圖如下： 示例程式碼：

.flex-box{
    flex-wrap: wrap;
}
複製程式碼

示例效果：

說明：wrap 表示換行，第一行在上方。使用 row-reverse 換行時，第一行在下方，亦即圖中item6會出現在第一行。

1.3 flex-flow屬性

該屬性是 flex-direction 和 flex-wrap 的簡寫形式，預設值為row nowrap。使用方式如下： 示例程式碼：:

.flex-box{
    flex-flow:colunm wrap;
}
複製程式碼

1.4 justify-content屬性

該屬性定義了專案在主軸（main axis）上的對齊方式，value的取值包括：

• flex-start：預設值。軸的起始端對齊（main/cross start）
• flex-end：軸的終點端
• center：居中
• space-between：兩端對齊，專案之間的間隔都相等。
• space-around：每個專案兩側的間隔相等。那麼專案之間的間隔就是專案與邊框之間的間隔的兩倍。

用法及效果如下：

說明：這些屬性對專案的作用是根據主軸的方向不同而改變的，如果將 direction 設定為 column，那麼這些效果則表現在縱向。

1.5 align-items屬性

該屬性定義專案在交叉軸（cross axis）上的對齊方式。value的取值包括：

• flex-start：交叉軸的起點對齊
• flex-end：交叉軸的終點對齊
• center：居中
• baseline：以專案的第一行文字的基線對齊
• stretch：預設值，如果專案未設定高度或設為auto，那麼專案將佔滿整個容器的高度。

效果如下：

1.6 align-content屬性

該屬性定義了多個軸線的對齊方式。value的取值包括：

• flex-start：與交叉軸的起點對齊
• flex-end：與交叉軸的終點對齊
• center：交叉軸上居中
• space-between：交叉軸上兩端對齊，軸線之間的間隔兩端分佈
• space-around：每個軸線兩側的間隔都相等。那麼，軸線之間的間隔是軸線與邊框之間間隔的兩倍
• stretch：預設值，軸線佔滿整個交叉軸

咦！怎麼都這麼熟悉呢？對比原來發現這個屬性的取值是跟前兩個屬性的取值有很大相似的。但它們其的效果還是有區別的。看圖：

對比下align-items裡面的center，是不是發現不同呢？每一行專案之間的距離變小了！是變小了嗎？其實是軸線居中了！在這裡，因為專案的換行，形成了多條軸線，而align-content就是作用在軸線上的，所以它會讓每一條軸線居中。而align-items是將所有的專案看做一個整體，即使專案換行，也是將整個專案看做是一條軸線，最後將這個整體居中。

三、Flex專案屬性

1. Flex的專案屬性包括：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1.1 order屬性

該屬性定義專案的排列順序，數值越小，排列越靠前，預設值為0。

示例程式碼：

<div class="flex-box">
    <div class="flex-item">item1</div>
    <div class="flex-item">item2</div>
    <div class="flex-item">item3</div>
</div>
複製程式碼

.flex-box{
    background:orange;
    display: flex;     /*定義為flex佈局*/
    }
.flex-item{
    margin:10px;
    height:100px;
    width:100px;
    background: purple;
    color:#fff;
}
div:first-child{
    order:0;   /*item1的序號為0*/
}
div:nth-child(2){
    order:-1;
}
div:last-child{
    order:2;
}
複製程式碼

示例效果：

說明：在本例中沒有設定flex-direction的屬性，那麼其值預設是row，你也可以嘗試將其設定成column，那麼flex專案則會根據order縱向排列。

1.2 flex-grow屬性

該屬性定義專案的放大比例，預設為0，即不作任何的放大。flex容器下的專案是根據這個值的比例對容器的剩餘空間進行瓜分的。使用效果如下：

說明：在使用這個屬性的時候，一般也最好不要對flex專案設定寬度/高度，否則會影響flex容器的比例分配。

1.3 flex-shrink屬性

該屬性定義了專案的縮小比例，預設為1，即專案縮小。使用效果如下：

說明：這裡flex容器的寬度設定成600px，flex專案的寬度均為300px，margin:10px；在為item1分配完空間後，剩下的空間被後面兩個專案按比例縮小分配。

1.4 flex-basis屬性

該屬性定義了在分配多餘空間之前，專案佔據的主軸空間(main size)。瀏覽器根據這個屬性，計算主軸(main asix)是否有多餘空間。它的預設值為auto，即專案的原本大小。它換可以設定為跟width屬性一樣的值（eg: 100px），即專案佔據固定空間（容器寬度不夠自動被壓縮）。使用效果如下：

說明：該屬性的用法就像是使用width(flex-direction:row; 的時候)或heigh(direction為column的時候)屬性那樣，在容器寬度不夠的時候，它會按照flex-shrink屬性的預設值壓縮專案。

1.5 flex屬性

該屬性是前三個屬性：flex-grow、flex-shrink、flex-basis 的簡寫形式。預設值為0 1 auto，即不放大，自動縮小，後面兩個屬性值是可選項。該屬性有兩個快捷鍵值：auto(0 1 auto)，none（0 0 auto）。建議優先使用這個屬性，而不是單獨寫三個分離的屬性。

1.6 align-self屬性

該屬性允許單個專案有與其他專案不一樣的對齊方式。可覆蓋作用在flex容器上的align-items屬性。預設值為auto，表示繼承父元素align-items屬性，如果沒有父元素，則等同stretch。value的取值包括：auto、flex-start、flex-end、end、baseline、stretch。該屬性的取值除了auto之外，其他屬性作用在該專案上的效果跟align-items作用在專案父元素（flex容器）上的效果是一樣的，唯一不同的是：align-self僅對使用了該屬性的專案產生效果，align-items是對所有的專案產生效果。

天下武功，唯快不破。Flex的優秀在於它的快捷，開發過程中使用Flex佈局可以輕鬆地達到你想要的佈局效果，方便快捷。嘗試它並愛上它～