理解 Flexbox：你須要知道這些

本文首發於個人博客，本文demo

flexbox 顧名思義 flexible box 彈性盒子，是 css3 中定義的一種新的佈局方式。經過在某元素上使用 display: flex; 便可把該元素定義爲 flex 容器 ( flex container )，而容器的全部子元素就是 flex 項目 ( flex item )。再介紹 flex 語法以前，先來看看一個重要的東西。

flex軸線

在 flex 容器裏，存在兩條軸，main axis 和 cross axis，又分別叫作主軸和交叉軸。主軸之因此叫作主軸而不叫作 x 軸，是由於主軸不必定是在水平線上的，也有多是垂直方向上，好比當 flex-direction: column; 的時候，主軸就是在垂直方向上。另外主軸和交叉軸都是有方向的，flex 項目就是沿着主軸方向進行佈局。主軸默認方向是從左到右，交叉軸則是從上到下。

css3 裏關於 flexbox 定義了2類的樣式，分別是做用於 flex 容器上的和做用於 flex 項目上的。

flex容器

能做用到 flex 容器上的樣式有這麼幾個：flex-direction，flex-wrap，flex-flow，justify-content，align-items 和 align-content。看到這麼幾個東西，別被它們嚇壞了，多讀幾遍你就能猜個八九不離十它們是幹嗎用的了。下面咱們一一來介紹這些樣式。

flex-direction

相信你也大概知道了這個樣式的做用了，對了就是和方向有關的。flex-direction 這個樣式就是用來控制 main axis 的方向的，默認值 row，表示水平從左到右。

• row，默認的屬性值，水平方向，從左到右
• column，垂直方向，從上到下
• row-reverse，水平方向，從右到左
• column-reverse，垂直方向，從下到上

ul {
    display: flex;
    flex-direction: row; /* column || row-reverse || column-reverse */
}
複製代碼

來一張圖，你就更好理解了：

flex-wrap

flex-wrap 規定了 flex 項目在主軸上是按照一行仍是多行顯示。

• nowrap，默認屬性，單行顯示，會盡力的壓縮每一個 flex 項目直到恰好容下里面的內容，實在壓縮不了的時候 flex 項目就可能會溢出容器。
• wrap，容許多行顯示，當一行顯示不下的時候，會變成多行顯示。
• wrap-reverse，多行顯示，且行的顯示順序是從下到上，即第一行顯示在容器的底部。

ul {
    display: flex;
    flex-wrap: nowrap; /* wrap || wrap-reverse */
}
複製代碼

flex-flow

flex-flow 是一個複合屬性，是由 flex-direction 和 flex-wrap 組成的屬性。若是隻定義了一個屬性，那麼另一個屬性取默認值。且屬性書寫順序沒有特別要求。

• row nowrap，這是默認屬性值

ul {
    display: flex;
    flex-flow: row wrap;
}
複製代碼

justify-content

justify-content 規定了 flex 項目在主軸的對齊方式。好比當 flex-direction 被設置爲 column 時，justify-content 定義的是垂直方向上的對齊方式。

• flex-start, 默認屬性值，flex項目將向着主軸起始位置對齊
• flex-end, flex 項目將向着主軸結束位置對齊
• center, flex 項目將在主軸上居中對齊
• space-between, flex 項目將在主軸上以相同的間距貼着軸的兩端對齊
• space-around, flex 項目將在主軸上以相同的間距靠着兩端對齊，且第一個頭尾項目和軸的兩端之間存在間距，間距是兩個項目間距的一半

ul {
    display: flex;
    justify-content: center;
}
複製代碼

align-items

竟然有主軸上的對齊方式，那麼確定也有相關的屬性是用來定義交叉軸上的對齊規則的。和 justify-content 同樣，align-items 也有5個屬性定義，其中 flex-start，flex-end 和 center 是同樣的，就很少介紹了。來講說兩個不一樣的：

• stretch，默認屬性值，flex 項目在交叉軸上的尺寸若是沒有指定或者是被設置爲 auto，那麼它將在這個方向上儘可能延伸，直到靠着容器邊界，可是同時延伸的程度也會受到 max-height 或者 max-width 的影響
• baseline，flex項目在交叉軸上的對齊方式將是由每一個項目內容的基線決定

ul {
    display: flex;
    align-items: flex-start;
}
複製代碼

align-content

理解了 justify-content 和 align-items 的對齊方式，再來看 align-content 就容易理解多了。它只做用於容器，且只能是存在多個行的容器。注意這裏的行是相對於交叉軸來講的。屬性值有6個：flex-start，flex-end，center，stretch，space-between 和 space-around，這些對齊方式上面都介紹過了，大同小異。其中默認值是stretch。結合下圖來加深理解：

ul {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around
}
複製代碼

flex項目

上面介紹了定義在 flex 容器上的 css 屬性，規範了整個容器裏全部項目的全局呈現。這樣不夠靈活多變，不足以表現某些須要特別顯示的項目，因此針對這一現狀，w3c 社區又推出了一套做用於 flex 項目上的 css 屬性。他們分別是：align-self，order，flex-grow，flex-shrink，flex-basis 和 flex 等 css 屬性。

• align-self

align-self 規定了單個 flex 項目在交叉軸上的對齊方式，屬性值能夠是下面一個：flex-start，flex-end，center，stretch，baseline和 auto，其中 auto 爲默認屬性值，若是被設置爲了 auto，那麼該 flex 項目最終的對齊方式將是由容器的 align-items決定。

ul {
    display: flex;
}
ul li {
    align-self: center;
}
複製代碼

order

order 定義了 flex 項目在容器裏的排列順序。取值能夠是負整數、0、正整數，默認取值是0。數值越大越靠近軸向的末端，數值相同則按照 html 裏的順序排列。

ul {
    display: flex;
}
ul li {
    order: 2;
}
複製代碼

flex-grow

flex-grow 規定了 flex 項目的伸展性，其值只能是 0 或者正整數，默認值是 0。若是一個 flex 項目同時設置了width 和值爲正整數的 flex-grow 屬性，則 width 屬性將失效。取值若是是0表示不進行伸展；若是是正整數，則會進行伸展，且伸展的尺寸將和數值的大小有關，值越大，伸展得越大。伸展的具體計算數值是該項目佔全部可伸展項目總和的比與這些全部可伸展項目佔的尺寸的乘積。

flex-shrink

與伸展相對應的屬性是 flex-shrink，定義了項目的收縮性，值也只能是 0 或者正整數，默認值是 1。若是是 0 表示不進行收縮，若是是正整數則表示進行收縮。若是一個項目同時顯示設置了尺寸和收縮值爲 1，那麼該項目將進行收縮，定義的尺寸將失效。 項目可以進行收縮的前提是必須產生溢出，即全部項目所佔尺寸之和必須大於容器尺寸。這個時候容器裏全部可收縮的項目就須要經過收縮來消化掉這部分溢出的尺寸。而每一個項目具體的收縮量則由其設置的收縮比例決定，數值越大，收縮得越厲害。好比一個容器的尺寸是 400px，只有2個項目且尺寸都是 300px，收縮比例是 1 比 3，那麼容器將溢出 200px，因此第一個項目須要收縮 50px，第二個項目須要收縮 150px，那麼收縮完成後它們佔據的尺寸分別是 250px 和 150px。

flex-basis

flex-basis 定義了項目在伸縮以前的初始尺寸，能夠是長度設置（px、rem 和 em 等）；能夠是用百分比基於父級來計算尺寸；也能夠是默認的 auto，表示其尺寸由內容決定。除了 auto 外，若是尺寸溢出容器了，那麼設置了 flex-basis 的項目間，則會根據每項設置的基準值，按比率伸縮剩餘空間。

flex

flex 是一個複合屬性，是由flex-grow、flex-shrink 和 flex-basis 組成的。

• flex-grow ，用來指定擴展比率，在 flex 屬性中該值若是被省略則默認爲1
• flex-shrink，用來指定收縮比率，在收縮的時候收縮比率會以伸縮基準值加權，在 flex 屬性中該值若是被省略則默認爲1
• flex-basis，用來指定伸縮基準值，即在根據伸縮比率計算出剩餘空間的分佈以前，表示尺寸的起始數值。在 flex 屬性中該值若是被省略則默認爲 0%。在flex屬性中該值若是被指定爲 auto，則伸縮基準值的計算值是自身的 width 設置，若是自身的寬度沒有定義，則長度取決於內容。

一些縮寫說明：

• flex: 1, 則其計算值爲1 1 0%
• flex: auto, 則其計算值爲1 1 auto
• flex: none, 則其計算值爲0 0 auto
• flex: 0 auto 或者flex: initial, 則其計算值爲0 1 auto

兼容性

flex 佈局在現代瀏覽器中兼容性仍是比較使人滿意的。能夠去caniuse裏看看，或者直接看這個用 flex 佈局寫的案例catty-music

參考文章

• 理解Flexbox：你須要知道的一切