Flex布局和Grid布局實例分析

本文小編為大家詳細介紹“Flex布局和Grid布局實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Flex布局和Grid布局實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

　　flex布局是一個網頁布局

　　容器的屬性

　　1.display:flex/inline-flex

　　2.flex-direction決定主軸的方向（即項目的排列方向）

　　flex-direction:row|row-reverse|column|column-reverse;

　　row（默認值）：主軸為水平方向，起點在左端。

　　row-reverse：主軸為水平方向，起點在右端。

　　column：主軸為垂直方向，起點在上沿。

　　column-reverse：主軸為垂直方向，起點在下沿。

　　3.flex-wrap決定換不換行，默認不換行

　　flex-wrap:nowrap|wrap|wrap-reverse;

　　4.flex-flow是flex-direction和flex-wrap的簡寫方式

　　flex-flow:<flex-direction>||<flex-wrap>;

　　5.justify-content決定了項目在主軸上的對齊方式

　　justify-content:flex-start|flex-end|center|space-between|space-around;

　　flex-start（默認值）：左對齊

　　flex-end：右對齊

　　center：居中

　　space-between：兩端對齊，項目之間的間隔都相等。

　　space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

　　6.align-item定義垂直位置，可以通過這個定義垂直居中

　　align-items:flex-start|flex-end|center|baseline|stretch;

　　flex-start：交叉軸的起點對齊。

　　flex-end：交叉軸的終點對齊。

　　center：交叉軸的中點對齊。

　　baseline:項目的第一行文字的基線對齊。

　　stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

　　7.align-content定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

　　align-content:flex-start|flex-end|center|space-between|space-around|stretch;

　　flex-start：與交叉軸的起點對齊。

　　flex-end：與交叉軸的終點對齊。

　　center：與交叉軸的中點對齊。

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

　　space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

　　stretch（默認值）：軸線占滿整個交叉軸。

　　grid布局很好，但是兼容性現在并不是很好，測試了幾個瀏覽器，支持谷歌、火狐、Opera，不支持safari，IE10以下，360，QQ瀏覽器

　　一、網格容器

　　1.display:grid/grid-inline

　　2.grid-template-columns和grid-template-rows屬性可以顯式的設置一個網格的列和行

　　fr單位可以幫助我們創建一個彈列的網格軌道。它代表了網格容器中可用的空間（就像Flexbox中無單位的值）

　　grid-template-columns:1fr1fr2fr

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

　　grid-template-rows:minmax(100px,auto);

　　grid-template-columns:minmax(auto,50%)1fr3em;

　　repeat()可以創建重復的網格軌道。這個適用于創建相等尺寸的網格項目和多個網格項目。repeat()接受兩個參數：第一個參數定義網格軌道應該重復的次數，第二個參數定義每個軌道的尺寸。

　　grid-template-rows:repeat(3,1fr);

　　grid-template-columns:30pxrepeat(3,1fr)30px;

　　二、間距

　　1.grid-column-gap創建列與列之間的間距

　　2.grid-row-gap創建行與行之間的間距

　　3.grid-gap

　　grid-gap是grid-row-gap和grid-column-gap兩個屬性的縮寫，如果它指定了兩個值，那么第一個值是設置grid-row-gap的值，第二個值設置grid-column-gap的值。如果只設置了一個值，表示行和列的間距相等，也就是說grid-row-gap和grid-column-gap的值相同。

　　三、網格線

　　1.【grid-row-start】【grid-row-end】【grid-column-start】【grid-column-end】

　　通過網格線可以定位網格項目。網格線實際上是代表線的開始、結束，兩者之間就是網格列或行。每條線是從網格軌道開始，網格的網格線從1開始，每條網格線逐步增加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的簡寫。grid-column是grid-column-start和grid-column-end的簡寫。如果只提供一個值，則指定了grid-row-start(grid-column-start)值；如果提供兩個值，第一個值是grid-row-start(grid-column-start)的值，第二個值是grid-row-end(grid-column-end)的值，兩者之間必須要用/隔開

　　grid-row:2;

　　grid-column:3/4;

　　3.關鍵詞span后面緊隨數字，表示合并多少個列或行

　　grid-row:1/span3;

　　grid-column:span2;

　　4.【grid-area】指定四個值，第一個值對應grid-row-start，第二個值對應grid-column-start，第三個值對應grid-row-end，第四個值對應grid-column-end

　　grid-area:2/2/3/3;

　　5.網格線命名

　　分配網格線名稱必須用方括號[網格線名稱]，然后后面緊跟網格軌道的尺寸值。

　　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()函數可以給網格線分配相同的名稱。

　　grid-template-rows:repeat(3,[row-start]1fr[row-end]);

　　grid-template-columns:repeat(3,[col-start]1fr[col-end]);

　　使用repeat()函數可以給網格線命名，這也導致多個網格線具有相同的網格線名稱。相同網格線名稱指定網格線的位置和名稱，也且會自動在網格線名稱后面添加對應的數字，使其網格線名稱也是唯一的標識符

　　使用相同的網格線名稱可以設置網格項目的位置。網格線的名稱和數字之間需要用空格分開

　　grid-row:row-start2/row-end3;

　　grid-column:col-start/col-start3;

　　6.網格區域命名

　　grid-template-areas引用網格區域名稱也可以設置網格項目位置

　　grid-template-areas:"headerheader""contentsidebar""footerfooter";

　　grid-template-rows:150px1fr100px;

　　grid-template-columns:1fr200px;

　　7.grid-auto-flow網格默認流方向是row，可以通過grid-auto-flow屬性把網格流的方向改變成column

　　grid-auto-flow:column

　　四、對齊

　　【網格項目對齊方式（BoxAlignment）】

　　CSS的BoxAlignmentModule補充了網格項目沿著網格行或列軸對齊方式。

　　【justify-items】

　　【justify-self】

　　justify-items和justify-self指定網格項目沿著行軸對齊方式；align-items和align-self指定網格項目沿著列軸對齊方式。

　　justify-items和align-items應用在網格容器上

　　【align-items】

　　【align-self】

　　align-self和justify-self屬性用于網格項目自身對齊方式

　　這四個屬性主要接受以下屬性值：

　　auto|normal|start|end|center|stretch|baseline|firstbaseline|lastbaseline

讀到這里，這篇“Flex布局和Grid布局實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。