圖解CSS3-flex佈局

摘要： 前言 最近筆者在複習以前基礎知識，發現很多細的知識點還是需要重新再總結一番。本文對flex佈局進行圖解說明，以後忘了的同學可以隨時過來檢視，歡迎轉載，煩請註明出處。 主體 萬丈高樓平地起，熟悉flex，先來了解下以下7種css屬性 display: flex; /* 設定父級元...

前言

最近筆者在複習以前基礎知識，發現很多細的知識點還是需要重新再總結一番。本文對flex佈局進行圖解說明，以後忘了的同學可以隨時過來檢視，歡迎轉載，煩請註明出處。

主體

萬丈高樓平地起，熟悉flex，先來了解下以下7種css屬性

display: flex;
/* 設定父級元素flex模式 */

flex-direction: column;
/* 設定子級元素排列方式，主軸是哪一根（橫/豎） */

flex-wrap: wrap;
/* 決定子級元素一行排列不下時，是否換行 */

flex-flow: row nowrap;
/* flex-direction和flex-wrap的綜合體 */

justify-content: center;
/* 專案在主軸上的對齊方式 */

align-items: center;
/* 專案在側軸上的對齊方式 */

align-content: space-between;
/* 多行專案的對齊方式 */

下面我們就對每個屬性進行詳細的探討：

1. flex-direction : 絕對主軸的方向

row
row-reverse
column
column-reverse

display: flex;

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

1. flex-wrap 當專案在一條軸線上排不下時，是否換行

wrap
nowrap
wrap-reverse

display: flex;

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

1. flex-flow : flex-direction 和 flex-wrap 的集合，也就是說這個屬性是後面兩個屬性的結合方式

• row nowrap （預設）水平方向，起點在左端，不換行

display: flex;

flex-flow: <flex-direction> || <flex-wrap>;

詳細可參考如上單個屬性的解釋

1. justify-content 定義專案在主軸上的對齊方式

flex-start
flex-end
center
space-between
space-around

display: flex;

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

這裡對 space-between 和 space-around 做一個簡單的區別說明：

1. 相同點：子元素都會自動排好，彼此之間距離相等

2. 不同點： space-between 兩端對齊，第一個子元素和最後一個子元素會貼著父級元素的邊框。 space-around 第一個子元素和最後一個子元素與邊框也會有一定的距離。

3. align-items 專案在側軸的對齊方式

flex-start
flex-end
center
stretch
baseline

display: flex;

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

1. align-content 定義多行專案的對齊方式。如果只有一行專案，該屬性不起作用

flex-start
flex-end
center
stretch
space-between
space-around

display: flex;

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

字尾

如果你覺得這個對你有幫助，歡迎轉載，煩請註明出處。同時也歡迎大家在GitHub上和我一起進階前端。

找到我： GitHub

找到我： 知乎