CSS3 Flex 彈性盒子布局

前言

前幾天寫了一篇關於 CSS3 Grid 格線布局，覺的應該也要也來搞明白 CSS3 Flex 彈性盒子布局。前情提要，其實對於 flex 和 grid 布局，共同之處就是它們都有外部容器以及內元素的概念。

正文

既然都知道 flex 布局有分外部容器跟內元素，那不妨先來看看都有哪些屬性!

flex 屬性一總攬

外部容器

屬性	描述
display	指明布局系統
flex-direction	內元素排列方向
flex-wrap	內元素超過範圍是否換行
justify-content	水平對齊方式(主軸軸對齊方式)
align-items	單行垂直對齊方式(交錯軸對齊方式)
align-content	多行垂直對齊方式(交錯軸對齊方式)

內元素

屬性	描述
order	單個元素的排列順序
align-self	該元素的垂直對齊方式
flex-grow	該元素佔用容器剩餘的比例
flex-shrink	該元素壓縮比例
flex-basis	該元素的基準值

有了初步概念，接下來一一來看每個屬性的效果以及 flex 布局的整體概念吧!

外部容器

display

這個屬性相信不用多說了，用意就只是指定布局系統而已。

.box {
    display: flex
}

axis (主軸)

在 flex 布局的世界裡，首先要知道，有兩個軸，分別是主軸 (main-axis) 和交錯軸 (cross-axis)。看看下面的圖就可以清楚理解了:

flex-direction

flex-direction 就是用來改變上面軸線的方向。有四種取值。

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

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

flex-wrap

flex-wrap 用於如果葉面寬度不夠的時候，是否換行。分為換行，不換行，換行後反轉。

.box {
    display: flex;
    flex-wrap: wrap | nowrap | wrap-reverse
}

flex-flow

flex-flow 就只是把 flex-direction 跟 flex-wrap 寫在一起而已。

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

justify-content

這個屬性可以理解為內元素對於主軸的對齊設定。這個屬性有六個取值。

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

接著來看看各自的效果吧!

flex-start : 靠左對齊

flex-end : 靠右對齊

center : 置中對齊

下面三個都是分散對齊，只不過有些差別。

space-around : 左右邊有留間距，最旁邊的間距為內間距的一半

space-between : 左右邊不留間距

space-evenly : 所有間距一致

align-items

這個屬性可以理解為內元素對於交錯軸的對齊設定。這個屬性有五個取值。

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

接著來看看各自的效果吧!

flex-start : 靠上對齊

flex-end : 靠下對齊

center : 置中對齊

stretch : 元素裡的內容撐滿對齊

baseline : 元素裡的文字內容對齊 flex 基準線 (都在同個高度)

align-content

這個屬性其實就是 align-items 的多行版本。如果元素只有單行是不會起效果的。這個屬性有六個取值。

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

flex-start : 緊密靠上對齊

flex-end : 緊密靠下對齊

center : 緊密置中對齊

space-between : 分散對齊（上下不留間距）

space-around : 分散對齊（上下有留間距）

stretch : 所有元素撐滿上下邊

內元素

order

這個屬性可以重新定義內元素的排列順序，順序會依據數值的大小排列。默認值為 0。本人一開始覺得有點抽象，來看例子。

沒有設定 order 前:

設定 order:

.box-3 {
    order: -1;
}

.box-4 {
    order: 1;
}

設定 order 之後:

所以可以清楚的看到，order 會根據大小，由小到大按照 flex-direction 的方向排列。而且，order 也可以為負。

align-self

這個屬性可以允許你針對任意內元素，更改它相對於交錯軸的對齊方式(相對於主軸則沒辦法更改)。所以這個屬性跟 align-items 一樣，有同樣的屬性。

.box {
    align-self: flex-start | flex-end | center | baseline | stretch
}

flex-start : 靠上對齊

flex-end : 靠下對齊

center : 置中對齊

stretch : 撐滿上下邊

baseline : 基準線對齊

.box-1 {
    align-self: flex-start;
}

.box-2 {
    align-self: flex-end;
}

.box-3 {
    align-self: center;
}

flex-grow

這個屬性是一個數值，代表任意元素的伸展性。是在如果還有剩餘空間的話，才有伸展的可能性。數值越大的元素會伸展的更多一些，也就是說，會佔據整個區塊的更大比例。默認值為 0。看看下面的效果也許更清楚些。

沒有設定 flex-grow 前:

設定 flex-grow:

.box-2 {
    flex-grow: 1
}

.box-3 {
    flex-grow: 2
}

設定 flex-grow 後:

flex-shrink

這個屬性是一個數值，代表任意元素的收縮性。如果外部容器空間不夠容納所有內元素，又不能「超出去」，那 flex 布局就要適當收縮某些元素啦!所以 flex-shrink 的默認值為 1，也就是說，如果你沒設定，其實 flex 布局也會幫你適當收縮各個內元素。而 flex-shrink 目的就在於，你想要針對特定元素做不一樣的收縮比例。值越大，收縮比例就越多。

這邊設定的外部容器寬度只有 600px。但 box1, box2, box3 寬度分別設定為 100px, 300px, 500px。顯然，外部容器無法正常容納所有內元素。

沒有設定 flex-shrink 前:

設定 flex-shrink:

.box-1 {
    width: 100px;
}

.box-2 {
    width: 300px;
    flex-shrink: 2;
}

.box-3 {
    width: 500px;
    flex-shrink: 3;
}

設定 flex-shrink 後:

flex-basis

元素的基準值，可使用不同的單位值。

flex

flex 就是把 flex-grow, flex-shrink, flex-basis 寫在一起而已。

.box {
    flex: <flex-grow> || <flex-shrink> || <flex-basis>
}

結語

CSS3 Flex 其實已經是非常主流的布局方式，且現在許多 CSS 框架也都是使用 Flex 來作網格排版。希望對於也還尚不了解 Flex 布局的人們多少有些幫助!如果還想了解 CSS3 Grid 布局的話，也歡迎看看這篇 CSS3-grid-格线布局。