CSS flex布局

1. 介紹

1.1 說明

flex布局，也稱為flex彈性布局；主要目的是使item的寬度、高度按一定順序填充父容器的可用空間。

示例

注意：在下文中，將以parent指代父容器，item指代容器內的項。

 

1.2 瀏覽器支持情況

IE 11才完全支持flex布局方案，在IE 10的CSS中可使用-ms-前綴支持部分flex布局，但只能使用舊的flex布局屬性：CSS Flexible Box Layout Module(2012 syntax)

IE	Edge	Firefox	Chrome	Android  Chrome	iOS  Safari
11 10 -ms-	all	28 18 -moz-	29 21 -webkit-	all	all

 

 

2. 父容器可使用的flex屬性

直接進入正題，先介紹父容器可使用flex布局相關的屬性。

2.1 display: flex | inline-flex

要創建一個flex容器，必須將父容器樣式中的display屬性設置為 flex 或 inline-flex。

.parent {
    display: flex; /* or inline-flex */
}

 

2.2 flex-direction

說明：設置item展示的方向。

語法：

flex-direction: row | row-reverse | column | column-reverse; 

row 默認值：item顯示在一行，從左到右依次展示。

row-reverse：item顯示在一行，從右到左依次展示。

column：item顯示在一列，從上到下依次展示。

column-reverse：item顯示在一列，從下到上依次展示。

示例：

 

2.3 flex-wrap

說明：當item在一行展示不下時，設置換行顯示的方式。

場景：item的寬度之和大於父容器的寬度。

語法：

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默認值：item不會換行。

wrap：按照item本身的寬度展示，若當前行展示不下時會換一行展示。

wrap-reverse：同wrap，不過是按相反方向換行展示item。

示例：

 

2.4 flex-flow

說明：flex-direction flex-wrap 的簡寫方式

語法：

flex-flow: flex-direction flex-wrap;

默認值：row nowrap

 

2.5 設置item對齊的屬性

說明：parent(父容器) 控制 item 的對齊方式的屬性有justify-content、align-items、align-content。

justify-content：控制所有item在main axis(主軸)上的對齊方式。

align-items：控制所有item在cross axis(交叉軸)的對齊方式。

align-content：當 flex-wrap:wrap*  時(即item換行排列)，控制item在cross axis(交叉軸)上的對齊方式。

main axis(主軸) 與 cross axis(交叉軸)

main axis(主軸)：指的是與flex-direction設定的值方向一致的軸，如flex-direction:row；那么主軸就是橫軸。

cross axis(交叉軸)：與main axis(主軸)交叉的軸，如主軸為橫軸，交叉軸就是縱軸。

軸的頭部和尾部

main-start：main axis(主軸)的頭部。

main-end：main axis(主軸)的尾部。

cross-start：cross axis(交叉軸)的頭部。

cross-end：cross axis(交叉軸)的尾部。

 

1) justify-content

說明：控制所有item在main axis(主軸)上的對齊方式。

語法：

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start 默認值：item從 main axis(主軸)頭部開始。

flex-end：item從 main axis(主軸)尾部開始。

center：item在 main axis(主軸)居中展示。

space-between：item均勻的分布在 main axis(主軸)上，其中第一個在 main axis(主軸)頭部，最后一個在  main axis(主軸)尾部。

space-around：item分布在 main axis(主軸)上。每個item的左右間隔是相等的。如每個item左右間隔為15px，第1個item與開始初間隔15px，第1個與第2個item間隔30px。

space-evenly：item均勻分布在 main axis(主軸)上。

示例：

參考：MDN:Aligning Items in a Flex Container

 

2) align-items

說明：控制所有item在cross axis(交叉軸)的對齊方式。

語法：

align-items: flex-start | flex-end | center | baseline | stretch;

stretch 默認值：item高度撐開到整個cross axis(交叉軸)。

flex-start：item頭對齊在cross axis(交叉軸)的開始處。

flex-end：item尾對齊在cross axis(交叉軸)的結尾處。

center：item垂直居中。

baseline：根據內容基線對齊。

示例：

 

3)align-content

說明：當 flex-wrap:wrap*  時(即item換行排列)，控制item在cross axis(交叉軸)曲線上的對齊方式。

語法：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

stretch 默認值：item高度撐開到整個cross axis(交叉軸)。

flex-start：item頭對齊在cross axis(交叉軸)的開始處。

flex-end：item尾對齊在cross axis(交叉軸)的結尾處。

center：item垂直居中。

space-between：item均勻的分布在cross axis(交叉軸)上，其中第一個在cross axis(交叉軸)頭部，最后一個在cross axis(交叉軸)尾部。

space-around：item分布在cross axis(交叉軸)上。每個item的上下間隔是相等的。。如每個item上下間隔為15px，第1個item與開始初間隔15px，第1個與第2個item間隔30px。

示例：

 

3. item可使用的flex屬性

3.1 item的默認寬度、高度

學習item可使用的flex屬性前，首先要知道默認情況下item的寬度、高度，以父容器 flex-direction:row 為例：

1)父容器設置了height，而item沒有設置，那么item的height會填滿父容器的height。因為默認情況下parent設置item的樣式為align-items : stretch。

2)父容器未設置height，某個item設置了height，其他item的height會等於item中最大的height。

3)父容器和item都沒有設置height，item會根據內容大小設置height，其他item的height會等於item中最大的height。

 

3.2 order

說明：默認情況下，item按HTML代碼的順序排列。但order屬性可以控制item在父容器中展現的順序。

語法：

order: <integer>; /* default is 0 */

參考：MDN:Ordering Flex Items

 

3.3 flex-basis

說明：設置item的初始化大小。

語法：

flex-basis: number | auto;

auto  默認值：根據內容區域的設置大小。

number ：可以為具體數字或百分比。

 

3.4 flex-grow

說明：指定item的瓜分剩余空間的占比；當前item的剩余空間占比 = current.flex-grow / allI.flex-grow 之和。

語法：

flex-grow: <number>; /* default 0 */

number 默認0：指定item如何瓜分剩余空間。

 

3.5 flex-shrink

說明： item縮減的占比

語法：

flex-shrink: <number>; /* default 1 */

number：默認1；

 

3.6 flex

說明：flex-grow flex-shrink flex-basis 的簡寫方式

語法：

flex: flex-grow flex-shrink flex-basis;

默認值：0 1 auto

 

4. DEMO

地址：https://codepen.io/polk6/pen/aGwwMQ

 

5.使用場景

5.1 自適應布局

說明：指定的item可以隨着父容器的大小一起改變。

示例：

.parent {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
 
.left {
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
 
.right {
    flex: 1; /* or flex-grow: 1 */
    height: 100%;
    background-color: #9dc3e6;
}

 

5.2 居中布局

說明：包括水平居中、垂直居中以及水平垂直居中。

示例：水平垂直居中

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.item {width: 100px;height: 50px;background-color: #9dc3e6;}

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

 

6. 參考資料

w3schools CSS flex Property：https://www.w3schools.com/cssref/css3_pr_flex.asp

A Complete Guide to Flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

W3C CSS Flexible Box Layout：https://www.w3.org/TR/css-flexbox-1/

MDN FlexBox：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox