目錄
傳統(tǒng)盒模型
Flexbox 布局方式
Flexbox 核心概念
Flex 容器屬性
flex-direction：項(xiàng)目元素排列的方向flex-wrap：項(xiàng)目元素排列方式justify-content： 項(xiàng)目在主軸上的對(duì)齊方式
-
align-items：項(xiàng)目在交叉軸上的對(duì)齊方式
-
align-content：多行項(xiàng)目的排列方式
Flex 項(xiàng)目屬性
-
order：項(xiàng)目的排列順序 -
flex-grow： 項(xiàng)目的放大比例
-
flex-basis：項(xiàng)目在主軸上的空間
-
align-self：項(xiàng)目的對(duì)齊方式
正文
- 傳統(tǒng)盒模型 ：通過(guò)
display、float等參數(shù)來(lái)配置具體的布局，這種方式代碼簡(jiǎn)單笆焰，但是在處理實(shí)現(xiàn)諸如垂直居中搓蚪、彈性寬度和高度等特性時(shí)會(huì)極為麻煩。
-
Flexbox 布局方式 ：可以快速的實(shí)現(xiàn)上述各種場(chǎng)景煌茴，以及更多非常常用的排版需求，例如：
— 豎排元素
— 元素左側(cè)/右側(cè)豎向?qū)R
Flexbox 核心概念
- 在進(jìn)行Flexbox 布局時(shí)，核心的屬性包括容器和項(xiàng)目：
— 容器 ： Flexbox 中外部的容器
— 項(xiàng)目 ： Flexbox 中內(nèi)部的項(xiàng)目
通過(guò)設(shè)置容器的參數(shù)创淡，來(lái)實(shí)現(xiàn)內(nèi)部項(xiàng)目按一定的順序來(lái)進(jìn)行排布：
Flex 容器屬性
- 通過(guò)設(shè)置 Flex 容器的屬性，可以設(shè)置容器內(nèi)各項(xiàng)目的樣式
— flex-direction ：項(xiàng)目元素排列的方向
① 值為 row： 內(nèi)部項(xiàng)目從左向右排列
② 值為 row-reverse ：內(nèi)部項(xiàng)目反轉(zhuǎn)橫向排列
③ 值為 column ：內(nèi)部項(xiàng)目縱向?qū)R
④ 值為 column-reverse ：內(nèi)部項(xiàng)目反轉(zhuǎn)縱向?qū)R
— flex-wrap ：項(xiàng)目元素排列方式
① 值為 nowrap ： 項(xiàng)目元素不會(huì)溢出南吮，也不會(huì)自動(dòng)換行
② 值為
wrap ： 當(dāng)項(xiàng)目元素的寬度超出容器的時(shí)候琳彩，就會(huì)自動(dòng)換行③ 值為
wrap-reverse ：子元素溢出容器時(shí)會(huì)反轉(zhuǎn)自動(dòng)換行— justify-content ： 項(xiàng)目在主軸上的對(duì)齊方式
① 值為 flex-start ：項(xiàng)目從主軸的開(kāi)始位置對(duì)齊
② 值為 flex-end ： 項(xiàng)目從主軸的結(jié)束位置對(duì)齊
③ 值為 center ：項(xiàng)目從主軸的中間開(kāi)始對(duì)齊
④ 值為 space-between ：各項(xiàng)目之間保持相同的距離進(jìn)行排布
⑤ 值為
space-around ：不僅各項(xiàng)目間保持相同的距離，且在兩側(cè)也會(huì)有一定的距離來(lái)保持排列—
align-items ：項(xiàng)目在交叉軸上的對(duì)齊方式① 值為
flex-start ：交叉軸的起點(diǎn)對(duì)齊② 值為
flex-end：交叉軸的終點(diǎn)對(duì)齊③ 值為
center ：交叉軸的中點(diǎn)對(duì)齊④ 值為
baseline：當(dāng)交叉軸與行內(nèi)軸為同一條時(shí)部凑，等價(jià)于 flex-start 露乏；其他情況下以項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊⑤ 值為
stretch （默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)置為auto，則沾滿(mǎn)整個(gè)容器的高度涂邀。（同時(shí)收寬度和高度的限制）— align-content ：多行項(xiàng)目的排列方式（定義多跟軸線(xiàn)的對(duì)齊方式殉挽，如果項(xiàng)目只有一根軸線(xiàn)鹃锈，該屬性不起作用）
① 值為 flex-start ：與交叉軸的起點(diǎn)對(duì)齊
② 值為 flex-end ：與交叉軸的終點(diǎn)對(duì)齊
③ 值為 center ：與交叉軸的中點(diǎn)對(duì)齊
④ 值為
space-between ：與交叉軸兩端對(duì)齊医瘫，軸線(xiàn)之間的距離平均分布⑤ 值為
space-around ：每根軸線(xiàn)兩側(cè)的間隔都相等竭贩，所以，軸線(xiàn)之間的間隔比軸線(xiàn)與邊框之間的間隔大一倍⑥ 值為
stretch （默認(rèn)值）：各行平均分配敷搪。軸線(xiàn)占滿(mǎn)整個(gè)交叉軸（同時(shí)受寬度和高度的影響）Flex 項(xiàng)目屬性
- 通過(guò)設(shè)置 flex 項(xiàng)目屬性兴想，我們可以控制各項(xiàng)目自己的屬性
— order ：項(xiàng)目的排列順序 （值越小，排列越靠前赡勘，默認(rèn)為0）
—
flex-grow ： 項(xiàng)目的放大比例（默認(rèn)為0嫂便，即如果有剩余空間，也不放大）—
flex-shrink ：項(xiàng)目的縮小比例 （默認(rèn)為1闸与，即如果空間不足毙替，則項(xiàng)目將縮小）如果所有的項(xiàng)目
flex-shrink 屬性都為1践樱，則空間不夠時(shí)厂画，都將等比例縮小。如果一個(gè)項(xiàng)目的 flex-shrink 屬性為0拷邢，其他項(xiàng)目都為1袱院，則空間不足時(shí)，前者不縮小。
— flex-basis ：項(xiàng)目在主軸上的空間 （默認(rèn)為auto忽洛，即項(xiàng)目本來(lái)的大心寤荨），它可以設(shè)為跟 width 或 height 一樣的
值欲虚，如 150px 集灌，則項(xiàng)目將占據(jù)固定空間。
—
align-self ：項(xiàng)目的對(duì)齊方式复哆，通過(guò)設(shè)置此屬性欣喧，可以讓項(xiàng)目和其他項(xiàng)目有不同的排列方式，可覆蓋 align-items 屬性梯找。默認(rèn)值為 auto续誉，表示繼承父元素的 align-items 屬性，如果沒(méi)有父元素初肉，則等同于 stretch 。此屬性有下圖中的6個(gè)值可選擇（除auto外饰躲，其他與align-items 可選值相同）牙咏。