這篇文章將為大家詳細(xì)講解有關(guān)Flex布局和Grid布局的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是創(chuàng)新互聯(lián)建站的服務(wù)宗旨！把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設(shè)中就是為了建設(shè)一個(gè)不僅審美在線，而且實(shí)用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對(duì)網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)頁設(shè)計(jì)、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無止境。

很久之前就用過flex布局，覺得很好用，但是由于兼容性，所以并沒有經(jīng)常用，因此在用flex布局的時(shí)候應(yīng)該考慮其兼容性，flex對(duì)移動(dòng)端的兼容性比較高。

flex布局是一個(gè)網(wǎng)頁布局

容器的屬性

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)目兩側(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: 1fr 1fr 2fr

minmax()函數(shù)來創(chuàng)建網(wǎng)格軌道的最小或大尺寸。minmax()函數(shù)接受兩個(gè)參數(shù)：第一個(gè)參數(shù)定義網(wǎng)格軌道的最小值，第二個(gè)參數(shù)定義網(wǎng)格軌道的大值。可以接受任何長度值，也接受auto值。auto值允許網(wǎng)格軌道基于內(nèi)容的尺寸拉伸或擠壓

grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

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: 30px repeat(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 / span 3;
grid-column: span 2;

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-start 2 / row-end 3;
grid-column: col-start / col-start 3;

6.網(wǎng)格區(qū)域命名

grid-template-areas 引用網(wǎng)格區(qū)域名稱也可以設(shè)置網(wǎng)格項(xiàng)目位置

grid-template-areas:   "header header"   "content sidebar"    "footer footer";
grid-template-rows:    150px 1fr 100px;

grid-template-columns: 1fr 200px;

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ì)齊方式（Box Alignment）】

CSS的Box Alignment Module補(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 | first baseline | last baseline

關(guān)于“Flex布局和Grid布局的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

分享題目：Flex布局和Grid布局的示例分析-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://vcdvsql.cn/article6/iepog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、外貿(mào)建站、靜態(tài)網(wǎng)站、軟件開發(fā)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)