Flex布局（彈性布局）

Flex是彈性布局，用來(lái)為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。

采用Flex布局的元素，稱為Flex容器。flex item項(xiàng)目是Flex布局的元素，簡(jiǎn)稱項(xiàng)目。

容器：水平的主軸（main axis）和垂直的交叉軸（cross axis），單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

容器的屬性：

1、flex-direction：決定主軸的方向（即項(xiàng)目的排列方向），注意main-size的位置和主軸方向一致。

.box {flex-direction：row（row-reverse、column、column-reverse）；}

row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。

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

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

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

2、flex-wrap：換行（如何換行）

.box{flex-wrap：nowrap（wrap、wrap-reverse）}

nowrap：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

3、justify-content：定義項(xiàng)目在主軸上的對(duì)齊方式

.box{justify-content：flex-start（flex-end、center、space-between、space-around）}

flex-start（默認(rèn)值）：左對(duì)齊

center：居中

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等

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

4、align-items：定義項(xiàng)目在交叉軸上如何對(duì)齊

.box{align-items：flex-start（flex-end，center、baseline、stretch）}

flex-start：交叉軸的起點(diǎn)對(duì)齊

flex-end：交叉軸的終點(diǎn)對(duì)齊

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

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

5、algin-content：定義了多根軸線的對(duì)齊方式，如果項(xiàng)目只有一根軸線，該屬性不起作用

.box{align-content：flex-start（flex-end、center、stretch、space-between、space-around）}

flex-start：與交叉軸的起點(diǎn)對(duì)齊。

flex-end：與交叉軸的終點(diǎn)對(duì)齊。

center：與交叉軸的終點(diǎn)對(duì)齊。

space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布

space-around：每根軸線兩側(cè)的間隔都相等。

stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

項(xiàng)目的屬性：

1、order：定義項(xiàng)目的排列順序，數(shù)值越小，排列越靠前，默認(rèn)0,。

.item{order：<integer>；}

2、flex-grow：定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

.item{flex-grow：<number>；}

3、flex-shrink：定義了項(xiàng)目的縮小比例，默認(rèn)為1，即空間不足，該項(xiàng)目縮小，如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小，如果一個(gè)項(xiàng)目的flex-shrink

屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小，負(fù)數(shù)對(duì)該屬性無(wú)效。

4、flex-basis：定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間，瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間，它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。

5、align-self：允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性，默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等于stretch。

Grid 布局 ，網(wǎng)格布局

Grid布局與Flex布局有一定的相似性，都可以指定，容器內(nèi)部多個(gè)項(xiàng)目的位置

Flex布局：軸線布局，可以看做是一維布局。

Grid布局：則是將容器劃分分成“行”和“列”，產(chǎn)生單元格，指定的項(xiàng)目所在的單元格，可以看做是二維布局。

1、grid-template-columns/row 屬性

columns? 是定義了每一列的寬

row? 是定義了每一行的高

2、repeat()? 兩個(gè)參數(shù)? (重復(fù)n次，重復(fù)的值)

?.box{

　　display：grid；

　　grid-template-columns：repeat（3，33.33%）

　　grid-template-row：repeat（3，33.33%）

}

3、可以給網(wǎng)格線起名字

.box{

　　display：grid；

　　grid-template-columns：[ ]? 100px??[ ]? 100px??[ ]? 100px? [ ]

　　grid-template-row：[ ]? 100px??[ ]? 100px??[ ]? 100px? [ ]

}

4、grid-row-gap屬性，grid-columns-gap屬性

grid-row-gap設(shè)置行與行的間隔（行間距）、

grid-columns-gap設(shè)置列與列的間隔（列間距）

5、網(wǎng)格布局允許指定區(qū)域（area），一個(gè)區(qū)域由單個(gè)或者多個(gè)單元格組成

grid-templace-area：header? header? header

　　　　　　　　　? main? ? ? main? ? ?sidebar

? 　　　　　　　　　footer? ? footer? ? ?footer

如果某些區(qū)域不需要利用，則用點(diǎn)（.）表示。

6、justify-items，align-items，place-items 屬性

justify-items 設(shè)置單元格內(nèi)容的水平位置

align-items 設(shè)置單元格內(nèi)容的垂直位置

7、justify-content，align-content，place-content

justify-content 整個(gè)內(nèi)容區(qū)域在容器里面的水平位置

align-content?整個(gè)內(nèi)容區(qū)域在容器里面的垂直位置

8、grid-auto-columns，grid-auto-rows屬性

有時(shí)候，一些項(xiàng)目的指定位置，在現(xiàn)在有網(wǎng)格的外部，比如3行，但是某一個(gè)項(xiàng)目指定在第5行，這時(shí)瀏覽器會(huì)自動(dòng)生成多余的網(wǎng)格。

轉(zhuǎn)載于:https://www.cnblogs.com/qrf1997/p/11016880.html

總結(jié)

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

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