您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“Flex布局和Grid布局實(shí)例分析”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“Flex布局和Grid布局實(shí)例分析”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
flex布局是一個(gè)網(wǎng)頁(yè)布局
容器的屬性
1.display:flex/inline-flex
2.flex-direction決定主軸的方向(即項(xiàng)目的排列方向)
flex-direction:row|row-reverse|column|column-reverse;
row(默認(rèn)值):主軸為水平方向,起點(diǎn)在左端。
row-reverse:主軸為水平方向,起點(diǎn)在右端。
column:主軸為垂直方向,起點(diǎn)在上沿。
column-reverse:主軸為垂直方向,起點(diǎn)在下沿。
3.flex-wrap決定換不換行,默認(rèn)不換行
flex-wrap:nowrap|wrap|wrap-reverse;
4.flex-flow是flex-direction和flex-wrap的簡(jiǎn)寫方式
flex-flow:<flex-direction>||<flex-wrap>;
5.justify-content決定了項(xiàng)目在主軸上的對(duì)齊方式
justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start(默認(rèn)值):左對(duì)齊
flex-end:右對(duì)齊
center:居中
space-between:兩端對(duì)齊,項(xiàng)目之間的間隔都相等。
space-around:每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
6.align-item定義垂直位置,可以通過這個(gè)定義垂直居中
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ì)齊。
stretch(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度。
7.align-content定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線,該屬性不起作用。
align-content:flex-start|flex-end|center|space-between|space-around|stretch;
flex-start:與交叉軸的起點(diǎn)對(duì)齊。
flex-end:與交叉軸的終點(diǎn)對(duì)齊。
center:與交叉軸的中點(diǎn)對(duì)齊。
space-between:與交叉軸兩端對(duì)齊,軸線之間的間隔平均分布。
space-around:每根軸線兩側(cè)的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch(默認(rèn)值):軸線占滿整個(gè)交叉軸。
grid布局很好,但是兼容性現(xiàn)在并不是很好,測(cè)試了幾個(gè)瀏覽器,支持谷歌、火狐、Opera,不支持safari,IE10以下,360,QQ瀏覽器
一、網(wǎng)格容器
1.display:grid/grid-inline
2.grid-template-columns和grid-template-rows屬性可以顯式的設(shè)置一個(gè)網(wǎng)格的列和行
fr單位可以幫助我們創(chuàng)建一個(gè)彈列的網(wǎng)格軌道。它代表了網(wǎng)格容器中可用的空間(就像Flexbox中無單位的值)
grid-template-columns:1fr1fr2fr
minmax()函數(shù)來創(chuàng)建網(wǎng)格軌道的最小或最大尺寸。minmax()函數(shù)接受兩個(gè)參數(shù):第一個(gè)參數(shù)定義網(wǎng)格軌道的最小值,第二個(gè)參數(shù)定義網(wǎng)格軌道的最大值??梢越邮苋魏伍L(zhǎng)度值,也接受auto值。auto值允許網(wǎng)格軌道基于內(nèi)容的尺寸拉伸或擠壓
grid-template-rows:minmax(100px,auto);
grid-template-columns:minmax(auto,50%)1fr3em;
repeat()可以創(chuàng)建重復(fù)的網(wǎng)格軌道。這個(gè)適用于創(chuàng)建相等尺寸的網(wǎng)格項(xiàng)目和多個(gè)網(wǎng)格項(xiàng)目。repeat()接受兩個(gè)參數(shù):第一個(gè)參數(shù)定義網(wǎng)格軌道應(yīng)該重復(fù)的次數(shù),第二個(gè)參數(shù)定義每個(gè)軌道的尺寸。
grid-template-rows:repeat(3,1fr);
grid-template-columns:30pxrepeat(3,1fr)30px;
二、間距
1.grid-column-gap創(chuàng)建列與列之間的間距
2.grid-row-gap創(chuàng)建行與行之間的間距
3.grid-gap
grid-gap是grid-row-gap和grid-column-gap兩個(gè)屬性的縮寫,如果它指定了兩個(gè)值,那么第一個(gè)值是設(shè)置grid-row-gap的值,第二個(gè)值設(shè)置grid-column-gap的值。如果只設(shè)置了一個(gè)值,表示行和列的間距相等,也就是說grid-row-gap和grid-column-gap的值相同。
三、網(wǎng)格線
1.【grid-row-start】【grid-row-end】【grid-column-start】【grid-column-end】
通過網(wǎng)格線可以定位網(wǎng)格項(xiàng)目。網(wǎng)格線實(shí)際上是代表線的開始、結(jié)束,兩者之間就是網(wǎng)格列或行。每條線是從網(wǎng)格軌道開始,網(wǎng)格的網(wǎng)格線從1開始,每條網(wǎng)格線逐步增加1
grid-row-start:2;
grid-row-end:3;
grid-column-start:2;
grid-column-end:3;
2.【grid-row】【grid-column】
grid-row是grid-row-start和grid-row-end的簡(jiǎn)寫。grid-column是grid-column-start和grid-column-end的簡(jiǎn)寫。如果只提供一個(gè)值,則指定了grid-row-start(grid-column-start)值;如果提供兩個(gè)值,第一個(gè)值是grid-row-start(grid-column-start)的值,第二個(gè)值是grid-row-end(grid-column-end)的值,兩者之間必須要用/隔開
grid-row:2;
grid-column:3/4;
3.關(guān)鍵詞span后面緊隨數(shù)字,表示合并多少個(gè)列或行
grid-row:1/span3;
grid-column:span2;
4.【grid-area】指定四個(gè)值,第一個(gè)值對(duì)應(yīng)grid-row-start,第二個(gè)值對(duì)應(yīng)grid-column-start,第三個(gè)值對(duì)應(yīng)grid-row-end,第四個(gè)值對(duì)應(yīng)grid-column-end
grid-area:2/2/3/3;
5.網(wǎng)格線命名
分配網(wǎng)格線名稱必須用方括號(hào)[網(wǎng)格線名稱],然后后面緊跟網(wǎng)格軌道的尺寸值。
grid-template-rows:[row-1-start]1fr[row-2-start]1fr[row-2-end];
grid-template-columns:[col-1-start]1fr[col-2-start]1fr[col-3-start]1fr[col-3-end];
使用repeat()函數(shù)可以給網(wǎng)格線分配相同的名稱。
grid-template-rows:repeat(3,[row-start]1fr[row-end]);
grid-template-columns:repeat(3,[col-start]1fr[col-end]);
使用repeat()函數(shù)可以給網(wǎng)格線命名,這也導(dǎo)致多個(gè)網(wǎng)格線具有相同的網(wǎng)格線名稱。相同網(wǎng)格線名稱指定網(wǎng)格線的位置和名稱,也且會(huì)自動(dòng)在網(wǎng)格線名稱后面添加對(duì)應(yīng)的數(shù)字,使其網(wǎng)格線名稱也是唯一的標(biāo)識(shí)符
使用相同的網(wǎng)格線名稱可以設(shè)置網(wǎng)格項(xiàng)目的位置。網(wǎng)格線的名稱和數(shù)字之間需要用空格分開
grid-row:row-start2/row-end3;
grid-column:col-start/col-start3;
6.網(wǎng)格區(qū)域命名
grid-template-areas引用網(wǎng)格區(qū)域名稱也可以設(shè)置網(wǎng)格項(xiàng)目位置
grid-template-areas:"headerheader""contentsidebar""footerfooter";
grid-template-rows:150px1fr100px;
grid-template-columns:1fr200px;
7.grid-auto-flow網(wǎng)格默認(rèn)流方向是row,可以通過grid-auto-flow屬性把網(wǎng)格流的方向改變成column
grid-auto-flow:column
四、對(duì)齊
【網(wǎng)格項(xiàng)目對(duì)齊方式(BoxAlignment)】
CSS的BoxAlignmentModule補(bǔ)充了網(wǎng)格項(xiàng)目沿著網(wǎng)格行或列軸對(duì)齊方式。
【justify-items】
【justify-self】
justify-items和justify-self指定網(wǎng)格項(xiàng)目沿著行軸對(duì)齊方式;align-items和align-self指定網(wǎng)格項(xiàng)目沿著列軸對(duì)齊方式。
justify-items和align-items應(yīng)用在網(wǎng)格容器上
【align-items】
【align-self】
align-self和justify-self屬性用于網(wǎng)格項(xiàng)目自身對(duì)齊方式
這四個(gè)屬性主要接受以下屬性值:
auto|normal|start|end|center|stretch|baseline|firstbaseline|lastbaseline
讀到這里,這篇“Flex布局和Grid布局實(shí)例分析”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。