Flex佈局——屬性

Flex佈局——屬性

標籤（空格分隔）： flex佈局

---

簡介

現在網頁佈局比較流行的是div佈局，但是深有體會的是例如垂直居中就不是很容易實現，雖然網上給了好多方案，但都稍麻煩；相對來說，Flex佈局就可以用簡簡單單幾個屬性就能完成各種各樣的佈局

有人可能會擔心瀏覽器的支持

瀏覽器	支持的版本
IE	10+
FireFox	22+
Chrome	21+
Opera	12.1+
Safari	6.1+

屬性

要使用Flex佈局首先要建立一個Flex容器，即在任何一個元素上添加

<div class='container'><!-容器-->
    <div class='item'></div><!-項目-->
    <div class='item'></div>
    <div class='item'></div>
</div>

.container{
    display:flex;
    display:-webkit-flex;//webkit內核瀏覽器需要添加的
}

整個容器有兩個軸，主軸（默認水平，相當於x軸）和交叉軸（默認垂直，相當於y軸）

其他在容器上使用的屬性

1. flex-direction

   規定其子元素即項目的排列方式，規定了主軸的方向，因爲後面的屬性都以主軸爲標準，所以會影響到後面的屬性

   屬性值

   • row: 主軸水平，從左到右
   • row-reverse: 主軸水平，從右到左
   • column: 主軸垂直，從上到下
   • column-reverse: 主軸垂直，從下到上

2. flex-wrap

   flex-direction雖然規定了排列方式，但是如果元素超過了一行怎麼辦，so flex-wrap屬性規定了項目如果超過一行，要如何換行

   屬性值

   • nowrap: 強制排列在一行，寬度等分，這時width規定的寬度會失效
   • wrap: 自動換行，即正常的換行，第一行顯示不完，自動換到第二行從左到右顯示
   • wrap-reverse： 換行，但是這種是按行倒着排列，即假設有兩行，則第二行顯示在前面，第一行顯示在第二行下面

3. flex-flow

   這個屬性就是把flex-direction和flex-flow寫在一起，例如 flex-flow: row wrap-reverse

4. justify-content

   規定了項目整體在主軸上的排列方式，即一行一行地

   屬性值（假設在主軸水平從左到右的情況下）

   • flex-start: 每一行項目靠左
   • flex-end: 每一行項目靠右
   • center: 每一行項目居住靠攏
   • space-between: 每兩個項目中間間距相同，左右兩端項目緊挨容器邊界
   • space-around: 例如某一行3個項目，則每一行的剩餘寬度等分成6份，每個項目兩側兩份，且不共用

5. align-content

   規定了項目整體在交叉軸上的排列方式

   屬性值（假設在主軸水平從左到右的情況下）

   • flex-start: 整體靠上
   • flex-end: 整體靠下
   • center: 垂直居中
   • space-between: 第一行靠頂端，最後一行靠底端，中間每兩行間距相同（即 將剩下的高度等分）
   • space-around: 假如有3行，則將除了每一行的高度剩餘的高度等分成6份，每一行上下兩份且不共用

6. align-items

   規定了每個項目在交叉軸上的位置

   屬性值

   • flex-start: 靠上
   • flex-end: 靠下
   • center: 垂直居中
   • stretch: 項目高度拉伸佔滿整個父元素的高度
   • baseline: 項目的第一行文字的基線對齊。

在項目上使用的屬性

1. order

   規定了元素的順序（order規定的順序值可以打亂html中的結構中的順序）

   屬性值： 就是一個整數值，越小越靠前

2. flex-grow

   規定主軸上一行的元素的放大比例，即對剩餘空間的分配，如果一行地元素都沒有設置寬度，那麼就是將這一行的寬度按照flex-grow的值進行比例分配

   屬性值：同樣也是數值

3. flex-shrink

   與flex-grow對應，規定了元素的縮小比例，默認值爲1，即父元素的寬度減小的時候，這些元素的寬度等比例縮小

   屬性值：數值（大於等於0，決定縮小比例，一個項目該屬性值爲0的時候，不進行縮小）

4. flex-basis

   規定了一個項目的寬度，和width效果基本相同

5. flex

   這是上面三個屬性flex-grow、flex-shrink、flex-basis的簡寫

6. align-self

   規定了該項目在交叉軸上的位置，可以覆蓋align-items

   屬性值

   • flex-start: 靠上
   • flex-end: 靠下
   • center: 垂直居中
   • stretch: 項目高度拉伸佔滿整個父元素的高度
   • baseline: 項目的第一行文字的基線對齊。
   • auto: 這個是指該項目的交叉軸上的位置由父元素的align-items決定