Flex佈局和Grid佈局實例分享

很久之前就用過flex佈局，覺得很好用，但是由於相容性，所以並沒有常用，因此在用flex佈局的時候應該考慮其相容性，flex對行動端的相容性比較高。

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佈局很好，但是相容性現在不是很好，測試了幾個瀏覽器，支援Google、火狐、Opera，不支援safari，IE10以下，360，QQ瀏覽器

一、網格容器

1.display:grid/grid-inline

2.grid-template-columns和grid-template-rows屬性可以明確的設定一個網格的列和行 

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

grid-template-columns: 1fr 1fr 2fr

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

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

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

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

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

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

6.網格區域命名

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

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

grid-template-columns: 1fr 200px;

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

grid-auto-flow: column

四、對齊

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

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

【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 | first baseline | last baseline

相关推荐：

Flex布局的可伸缩性详解

CSS3中关于Flex布局的详解

CSS使用Grid布局构建网站首页

以上是Flex佈局和Grid佈局實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！