前言

對(duì)于Flex布局，在之前我用的最多的無(wú)非是justify-content:center和align-items:center這兩個(gè)屬性，對(duì)其他的屬性知之甚少，最近也看了不少關(guān)于Flex布局的博文，自己整理之后，決定寫下這篇博客，以便之后學(xué)習(xí)。

Flex布局教程

• 前言
• Flex布局是什么
• • 1. 容器屬性
  • • 1.1 flex-direction屬性
    • 1.2 flex-wrap屬性
    • 1.3 flex-flow屬性
    • 1.4 justify-content屬性
    • 1.5 align-items屬性
    • 1.6 align-content屬性
  • 2. 項(xiàng)目屬性

Flex布局是什么

Flex是Flexible Box的縮寫，意為”彈性布局”，用來(lái)為盒狀模型提供最大的靈活性。

任何一個(gè)容器都可以指定Flex布局：

.cloud-box {display: flex; }

也可以將行內(nèi)元素作為一個(gè)容器：

.cloud-box {display: inline-flex; }

修改父元素display:flex，div自動(dòng)就排列成了一行，沒(méi)有浮動(dòng)之后的副作用，從回流角度考慮，flex的性能更優(yōu)于float。

注：設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

Flex屬性主要由容器屬性和項(xiàng)目屬性構(gòu)成，下面會(huì)分別講到這兩個(gè)屬性。

1. 容器屬性

1.1 flex-direction屬性

取值：row(默認(rèn)) | row-reverse | column | column-reverse

row(默認(rèn)): 主軸為水平方向，起點(diǎn)在左端

row-reverse: 主軸為水平方向，起點(diǎn)在右端

column：主軸為垂直方向，起點(diǎn)在上沿

column-reverse：主軸為垂直方向，起點(diǎn)在下沿

1.2 flex-wrap屬性

取值：nowrap(默認(rèn)) | wrap | wrap-reverse

nowrap（默認(rèn)）：不換行
舉個(gè)栗子：box容器的寬度為150px，容器中有5個(gè)寬度為50px的項(xiàng)目，nowrap的情況下，項(xiàng)目會(huì)強(qiáng)制等分，不換行，因此，每個(gè)項(xiàng)目的寬度就會(huì)變?yōu)?0px，而非之前的50px。

wrap：換行，第一行在上方

wrap-reverse：換行，第一行在下方
需要注意的是第一排會(huì)緊貼容器底部，而不是我們想象的項(xiàng)目4、5緊貼容器頂部，效果與wrap相反。

1.3 flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。

1.4 justify-content屬性

取值：flex-start(默認(rèn)) | flex-end | center | space-between | space-around | space-evenly

flex-start: 左對(duì)齊

flex-end: 右對(duì)齊

center: 居中

space-between: 兩端對(duì)齊，項(xiàng)目之間的間隔相等，即剩余空間等分成間隙。

)
space-around: 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等，所以項(xiàng)目之間的間隔比項(xiàng)目與邊緣的間隔大一倍。

1.5 align-items屬性

取值：stretch(默認(rèn)) | flex-start | flex-end | center | baseline

stretch: 如果項(xiàng)目未設(shè)置高度或者設(shè)為 auto，將占滿整個(gè)容器的高度。

flex-start: 交叉軸的起點(diǎn)對(duì)齊，會(huì)讓項(xiàng)目在縱軸緊貼容器頂部

flex-end: 交叉軸的終點(diǎn)對(duì)齊，會(huì)讓項(xiàng)目在縱軸緊貼容器底部

center: 交叉軸的中點(diǎn)對(duì)齊

baseline: 項(xiàng)目的第一行文字的基線對(duì)齊

1.6 align-content屬性

用于控制多行項(xiàng)目的對(duì)齊方式，如果項(xiàng)目只有一行則不會(huì)起作用
flex-wrap 設(shè)置為 nowrap 的時(shí)候，容器僅存在一根軸線，因?yàn)轫?xiàng)目不會(huì)換行，就不會(huì)產(chǎn)生多條軸線。
flex-wrap 設(shè)置為 wrap 的時(shí)候，容器可能會(huì)出現(xiàn)多條軸線，這時(shí)候你就需要去設(shè)置多條軸線之間的對(duì)齊方式了。

取值：stretch(默認(rèn)) | flex-start | flex-end | center | space-between | space-around | space-evenly

stretch: 在項(xiàng)目沒(méi)設(shè)置高度，或高度為auto情況下讓項(xiàng)目填滿整個(gè)容器，與align-items類似。

flex-start ，center，flex-end 與align-items屬性表現(xiàn)一致

space-around: 每個(gè)軸線兩側(cè)的間隔相等，所以軸線之間的間隔比軸線與邊緣的間隔大一倍
space-between: 軸線兩端對(duì)齊，之間的間隔相等，即剩余空間等分成間隙
space-evenly: 項(xiàng)目之間間距與項(xiàng)目到容器之間間距相等

2. 項(xiàng)目屬性

Flex布局教程（二）

總結(jié)

以上是生活随笔為你收集整理的Flex布局教程（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。