flex佈局

Flex基本概念

• 在 flex 容器中默認存在兩條軸，水平主軸(main axis) 和垂直的交叉軸(cross axis)，這是默認的設置，固然你能夠經過修改使垂直方向變爲主軸，水平方向變爲交叉軸。
• 在容器中的每一個單元塊被稱之爲 flex item，每一個項目佔據的主軸空間爲 (main size), 佔據的交叉軸的空間爲 (cross size)。

Flex容器

實現 flex 佈局須要先指定一個容器，任何一個容器均可以被指定爲 flex 佈局，這樣容器內部的元素就可使用 flex 來進行佈局

.container {
    display: flex | inline-flex;       //能夠有兩種取值
}

分別生成一個塊狀或行內的 flex 容器盒子。簡單說來，若是你使用塊元素如 div，你就可使用 flex，而若是你使用行內元素，你可使用 inline-flex。

須要注意的是：當時設置 flex 佈局以後，子元素的 float、clear、vertical-align 的屬性將會失效。

有下面六種屬性能夠設置在容器上，它們分別是：

1. flex-direction——決定主軸的方向(即項目的排列方向)
2. flex-wrap——決定容器內項目是否可換行
3. flex-flow——flex-direction 和 flex-wrap 的簡寫形式
4. justify-content——定義了項目在主軸的對齊方式
5. align-items——定義了項目在交叉軸上的對齊方式
6. align-content—— 定義了多根軸線的對齊方式，若是項目只有一根軸線，那麼該屬性將不起做用

flex-direction: 決定主軸的方向(即項目的排列方向)

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

默認值：row，主軸爲水平方向，起點在左端。

row-reverse：主軸爲水平方向，起點在右端

column：主軸爲垂直方向，起點在上沿

column-reverse：主軸爲垂直方向，起點在下沿

flex-wrap: 決定容器內項目是否可換行

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

默認值：nowrap 不換行，即當主軸尺寸固定時，當空間不足時，項目尺寸會隨之調整而並不會擠到下一行。

wrap：項目主軸總尺寸超出容器時換行，第一行在上方

wrap-reverse：換行，第一行在下方

flex-flow: flex-direction 和 flex-wrap 的簡寫形式

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content：定義了項目在主軸的對齊方式

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

默認值: flex-start 左對齊

flex-end：右對齊

center：居中

space-between：兩端對齊，項目之間的間隔相等，即剩餘空間等分紅間隙。

space-around：每一個項目兩側的間隔相等，因此項目之間的間隔比項目與邊緣的間隔大一倍。

align-items: 定義了項目在交叉軸上的對齊方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

默認值爲 stretch 即若是項目未設置高度或者設爲 auto，將佔滿整個容器的高度。

flex-start：交叉軸的起點對齊

flex-end：交叉軸的終點對齊

center：交叉軸的中點對齊

baseline: 項目的第一行文字的基線對齊

align-content: 定義了多根軸線的對齊方式，若是項目只有一根軸線，那麼該屬性將不起做用

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

flex-start：軸線所有在交叉軸上的起點對齊

flex-end：軸線所有在交叉軸上的終點對齊

center：軸線所有在交叉軸上的中間對齊

space-between：軸線兩端對齊，之間的間隔相等，即剩餘空間等分紅間隙。

space-around：每一個軸線兩側的間隔相等，因此軸線之間的間隔比軸線與邊緣的間隔大一倍

Flex 項目屬性

1. order——定義項目在容器中的排列順序，數值越小，排列越靠前，默認值爲 0
2. flex-basis——定義了在分配多餘空間以前，項目佔據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多餘空間
3. flex-grow——定義項目的放大比例
4. flex-shrink——定義了項目的縮小比例
5. flex——flex-grow, flex-shrink 和 flex-basis的簡寫
6. align-self——容許單個項目有與其餘項目不同的對齊方式

order: 定義項目在容器中的排列順序，數值越小，排列越靠前，默認值爲 0

.item {
    order: <integer>;
}

flex-basis: 定義了在分配多餘空間以前，項目佔據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多餘空間

.item {
    flex-basis: <length> | auto;
}

flex-grow: 定義項目的放大比例

.item {
    flex-grow: <number>;
}

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍

flex-shrink: 定義了項目的縮小比例

.item {
    flex-shrink: <number>;
}

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小

flex: flex-grow, flex-shrink 和 flex-basis的簡寫

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self: 容許單個項目有與其餘項目不同的對齊方式

.item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。