CSS布局模式之Flex布局&Grid布局

1. 簡介

1.1 什麼是CSS布局？

CSS布局（Cascading Style Sheets layout）指的是通過使用CSS樣式來控制網頁中元素的布局方式。

在網頁設計中，布局是非常重要的一個方面，因為它決定了網頁中内容的呈現方式，對網頁的可讀性、可用性和美觀性都有着重要的影響。

在CSS的發展過程中，出現了許多不同的布局方案，其中Flex布局和Grid布局是最常用的兩種布局方式。

通過使用CSS布局，開發者可以通過少量的代碼來快速而有效地實作自己所需要的布局效果。

1.2 為什麼使用CSS布局？

使用CSS布局有許多好處，以下是其中的幾個主要原因：

1. 統一風格：使用CSS布局可以確定網頁的各個部分在不同浏覽器和裝置上看起來一緻，避免了由于不同裝置或浏覽器的不同特性導緻的頁面混亂的情況。
2. 簡化代碼：使用CSS布局可以大大簡化HTML代碼，通過統一的布局方式可以減少重複代碼，提高了開發效率，減輕了開發工作的負擔。
3. 增強可讀性：使用CSS布局可以使網頁代碼更加清晰和易于了解，開發者可以通過對樣式的修改來達到想要的效果，而無需直接修改HTML代碼，使得代碼的維護更加容易。
4. 響應式設計：使用CSS布局可以實作響應式設計，即通過設定不同的樣式規則來适應不同的裝置和螢幕尺寸，使得網頁可以在不同的裝置和螢幕上都能夠完美顯示，提高了使用者體驗。

2. Flex布局

2.1 什麼是Flex布局？

Flex布局是一種基于CSS3的新的布局方式，它可以友善地實作元素的彈性布局，即使在不同的螢幕尺寸和不同的裝置上，元素也可以按照預期的方式自适應地伸縮和排列。

簡單來說，Flex布局使得容器的尺寸可以自适應，元素可以像彈簧一樣自動填充到容器中，并且可以很友善地控制元素的排列方式和對齊方式，實作各種複雜的布局效果。

Flex布局的核心是Flex容器和Flex項目。

• Flex容器是指一個元素，它的所有子元素都會成為Flex項目。
• Flex項目是指Flex容器中的子元素，可以按照一定的規則進行排序和排列。

Flex容器有一系列的屬性可以控制容器的排列方式，Flex項目也有一些屬性可以控制項目的大小和位置。

通過靈活的控制這些屬性，可以實作各種複雜的布局效果，例如水準居中、垂直居中、等分布局、換行、流式布局等。

2.2 Flex容器和Flex項目

Flex容器和Flex項目是Flex布局的兩個基本元素，它們有不同的屬性和作用：

1. Flex容器

Flex容器是Flex布局中的父容器，用于包含Flex項目。通過定義Flex容器的屬性，可以控制Flex項目在容器中的排列方式和對齊方式。

常見的Flex容器屬性包括：

• display：定義Flex容器的類型，預設為flex。
• flex-direction：定義Flex項目在Flex容器中的排列方向，可以是row、row-reverse、column或column-reverse。
• justify-content：定義Flex項目在Flex容器中的水準對齊方式，可以是flex-start、flex-end、center、space-between或space-around。
• align-items：定義Flex項目在Flex容器中的垂直對齊方式，可以是flex-start、flex-end、center、baseline或stretch。
• align-content：定義Flex項目在多行或多列的容器中的垂直對齊方式，僅在有多個Flex行或Flex列時生效，常用的取值包括flex-start、flex-end、center、space-between、space-around和stretch。

2. Flex項目

Flex項目是Flex容器中的子元素，不同的Flex項目可以按照一定的規則排序和排列。通過定義Flex項目的屬性，可以控制項目在容器中的大小、位置和排序方式。

常見的Flex項目屬性包括：

• flex-grow：定義項目的放大比例，預設為0，不會被放大。
• flex-shrink：定義項目的縮小比例，預設為1，即當空間不足時，Flex項目壓縮大小，以适應容器。
• flex-basis：定義項目在配置設定多餘空間之前的基準大小，預設為auto，即根據項目内容自動計算大小。
• flex：flex-grow、flex-shrink和flex-basis的縮寫，可以同時設定這三個屬性。
• order：定義項目的排列順序，數值越小越靠前，預設為0。

通過組合使用Flex容器和Flex項目的屬性，我們可以輕松實作各種靈活的布局效果，使得網頁可以适應不同的裝置和螢幕大小，提高網頁的可讀性和使用者體驗。

2.3 Flex容器的屬性

2.3.1 flex-direction

flex-direction是Flex布局中比較重要的一個屬性，用于指定Flex容器中Flex項目的排列方向。

該屬性接受四個值：row、row-reverse、column和column-reverse，分别代表水準方向從左到右排列、水準方向從右到左排列、垂直方向從上到下排列和垂直方向從下到上排列。

預設情況下，flex-direction屬性的值為row，即水準方向從左到右排列。

該屬性可以與其他的Flex容器屬性如justify-content和align-items聯合使用，來實作不同的Flex項目布局效果。例如，

• 當flex-direction: row時，justify-content屬性可以設定Flex項目在主軸上（水準方向）的對齊方式，align-items屬性可以設定Flex項目在交叉軸上（垂直方向）的對齊方式；
• 而當flex-direction: column時，則相反，justify-content屬性可以設定Flex項目在交叉軸上（水準方向）的對齊方式，align-items屬性可以設定Flex項目在主軸上（垂直方向）的對齊方式。

需要注意的是，使用flex-direction屬性可以通過改變Flex容器中Flex項目的排列方式，來實作各種布局效果，但并不會影響Flex項目的大小和位置，需要使用其他的Flex項目屬性來進一步控制。

2.3.2 justify-content

justify-content是Flex布局中比較常用的一個屬性，用于控制Flex項目在Flex容器的主軸上的對齊方式。該屬性接受5個值：

• flex-start：左對齊（預設值）。
• flex-end：右對齊。
• center：居中對齊。
• space-between：兩端對齊，Flex項目之間的間隔相等。
• space-around：均勻對齊，Flex項目之間的間隔相等。

需要注意的是，justify-content屬性隻對Flex容器中的Flex項目在主軸方向上的位置進行對齊，不影響在交叉軸方向上的位置。該屬性通常與flex-direction聯合使用，來控制Flex項目在不同方向上的對齊方式。

另外，如果Flex項目是可以換行的，即使用了flex-wrap: wrap等屬性，justify-content屬性也會影響換行後的Flex項目對齊方式。例如，如果在Flex容器中有多個Flex項目，當空間不足時，Flex項目會自動換行，此時可以使用align-content屬性控制多行的Flex項目在交叉軸上的對齊方式。和justify-content類似，align-content同樣接受5個值，分别對應不同的對齊方式。

2.3.3 align-items

align-items是Flex布局中用于控制Flex項目在Flex容器的交叉軸方向上的對齊方式的屬性。該屬性接受5個值：

• flex-start：Flex項目在交叉軸的起始位置對齊（預設值）。
• flex-end：Flex項目在交叉軸的結束位置對齊。
• center：Flex項目在交叉軸的中間位置對齊。
• baseline：Flex項目在基線（baseline）上對齊。
• stretch：Flex項目在交叉軸上拉伸，占滿容器的高度。

需要注意的是，align-items屬性隻影響Flex項目在交叉軸上的對齊方式，不影響在主軸方向上的位置。該屬性通常與flex-direction聯合使用，來控制Flex項目在不同方向上的對齊方式。

另外，如果Flex項目是可以換行的，即使用了flex-wrap: wrap等屬性，align-items屬性也會影響換行後的Flex項目對齊方式。如果Flex容器有多行Flex項目，可以使用align-content屬性控制多行的Flex項目在交叉軸上的對齊方式。詳見align-content的解釋。

2.3.4 align-content

align-content屬性用于控制Flex容器中多行大于一行的的Flex項目在交叉軸方向上的對齊方式。該屬性隻對多行的Flex項目有效，對于單行Flex項目無效。align-content屬性接受5個值：

• flex-start：多行Flex項目在交叉軸的起始位置對齊。
• flex-end：多行Flex項目在交叉軸的結束位置對齊。
• center：多行Flex項目在交叉軸的中間位置對齊。
• space-between：多行Flex項目沿交叉軸均勻分布。
• space-around：多行Flex項目沿交叉軸均勻分布，項目之間的距離也相等。
• stretch：多行Flex項目在交叉軸上拉伸，填滿整個Flex容器的高度（預設值）。

需要注意的是，align-content屬性隻對多行的Flex項目在交叉軸上的對齊方式進行控制，不會對單行的Flex項目進行影響。并且，該屬性隻有在flex-wrap屬性設定為wrap（意味着Flex項目在Flex容器中可以換行）時才有效，否則無論多少行的Flex項目都隻有一行。

此外，align-content屬性可以和align-items屬性配合使用來對多行的Flex項目在交叉軸方向上進行完整的控制，在一些特殊場景下可能會有更好的效果。

2.4 Flex項目的屬性

2.4.1 flex-grow

flex-grow是Flex布局中一種用于控制Flex項目占據剩餘空間的屬性。該屬性定義了當剩餘空間不足時，Flex項目是否拉伸以填滿剩餘空間的比例。flex-grow屬性的值必須是非負數，預設值為0，表示當空間不足時Flex項目不進行拉伸，并且剩餘空間被Flex容器中的其他Flex項目所占據。

預設情況下，Flex項目根據其在Flex容器中的排序順序來進行配置設定空間，是以，如果Flex項目未設定flex-grow屬性，将按照預設值為0予以處理。而當Flex項目設定了flex-grow屬性後，剩餘的空間将按照Flex項目的flex-grow屬性來配置設定。

flex-grow屬性的計算方式如下：

• 将所有不設定flex-grow屬性的Flex項目的flex-grow屬性值設為0。
• 計算剩餘空間：容器的可用空間減去所有Flex項目的基準空間（即Flex項目的占據的空間或者flex-basis屬性值）。
• 将所有Flex項目的flex-grow屬性值相加， 計算出所有Flex項目在剩餘空間中所占的比例。例如，如果所有Flex項目的flex-grow值之和是3，那麼每個Flex項目在剩餘空間中所占的比例就是"1/3"。
• 将每個Flex 項目的flex-grow值乘以該Flex項目在剩餘空間中占據的比例，從原有的基準空間中配置設定給該Flex項目。

需要注意的是， flex-grow屬性僅在Flex項目有剩餘空間時才有效。當Flex項目的基準空間已經完全覆寫了其配置設定的空間時，flex-grow屬性将不起作用。

2.4.2 flex-shrink

flex-shrink是Flex布局中一種用于控制Flex項目收縮的屬性。

該屬性定義了當空間不足時，Flex項目是否縮小以适應剩餘空間的比例。

flex-shrink屬性的值必須是非負數，預設值為1，表示當空間不足時Flex項目進行收縮。

當Flex項目的總長度大于Flex容器的長度時，剩餘寬度将按照Flex項目設定的flex-shrink屬性值進行配置設定。了解flex-shrink屬性的關鍵就是了解Flex項目的收縮比例。

每個Flex項目的收縮比例等于其flex-shrink屬性值除以所有Flex項目的flex-shrink屬性值之和。例如，假設Flex容器的寬度為100px，其中有三個Flex項目，設定了flex-shrink屬性的值分别為1、2和3，則這三個Flex項目的收縮比例分别為1/6、2/6和3/6，容器中每個Flex項目的寬度将分别減少100px * (1/6)、100px * (2/6)和100px * (3/6)。

需要注意的是，flex-shrink屬性僅在Flex項目的基準空間（即Flex項目的flex-basis屬性值）大于其占據的空間時才有效。此外，flex-shrink屬性的值的大小将影響Flex項目的收縮比例，并且如果所有Flex項目的flex-shrink屬性值都設定為0，則表示Flex項目不能縮小，不會根據剩餘空間的大小調整Flex項目的大小。

2.4.3 flex-basis

flex-basis是Flex布局中一種定義Flex項目基準空間的屬性。它指定了Flex項目在Flex容器内占據的空間，以及在計算Flex項目的flex-grow和flex-shrink屬性時所使用的基礎空間。如果未指定flex-basis屬性，則該屬性預設為auto，其大小由Flex項目的内容決定。

flex-basis屬性的值可以是一個長度值、一個百分比值、一個關鍵字auto或一個關鍵字content。長度值和百分比值指定了Flex項目在Flex容器内占據的精确空間大小，而auto值表示由Flex項目的實際大小決定，而content表示由Flex項目的内容決定。

flex-basis屬性通常與flex-grow和flex-shrink屬性一起使用，以定義Flex項目的收縮和拉伸比例。當需要對Flex容器中的Flex項目進行收縮或拉伸時，Flex容器計算出每個Flex項目的基準空間（即flex-basis屬性的值），并将它們的大小相加得到Flex容器的總基礎空間。Flex容器剩餘的空間将根據每個Flex項目的flex-grow和flex-shrink屬性值進行配置設定。

需要注意的是，當flex-basis屬性設定為content時，Flex項目的大小取決于其内容的大小，并且flex-grow和flex-shrink屬性不再起作用。是以，如果希望Flex項目能夠根據其内容的大小自适應，可以為其設定flex-basis: content。

2.4.4 order

order是Flex布局中用于指定Flex項目排列順序的屬性。它可以控制Flex項目的排列順序，實作Flex項目在顯示時的前後位置變化，适用于所有Flex項目。該屬性的值越小，Flex項目的排列順序就越靠前，預設值為0。

order值可以是任何整數，包括負整數。負數值最靠前，整數值最靠後。如果兩個Flex項目具有相同的order值，則它們将按照在Flex容器中的正常位置順序排列。

這個屬性有些特點，可以通過改變order來調整Flex項目的顯示順序，而無需改變它們在HTML源代碼中的位置。這可以讓開發人員更容易地管理和維護Flex項目，并使Flex布局更具靈活性。

需要注意的是，order屬性的值不影響Flex項目的實際大小或所占空間，僅影響其在Flex容器中的顯示順序。

3. Grid布局

3.1 什麼是Grid布局？

Grid布局是一種用于網格化布局Web頁面的CSS布局子產品，它允許開發者将頁面分割成行和列，并使頁面中的元素具有更靈活和精确的定位。

使用Grid布局，開發者可以自由地将頁面分成多個區域，然後在這些區域中放置内容子產品。每個區域的尺寸可以由開發者自己決定，而且不同區域之間的尺寸也可以互不相同，在這一點上，Grid布局非常類似于傳統的框格布局。

Grid布局中的重要概念包括網格（grid）、網格項（grid item）、行（row）、列（column）、行軌（row track）、列軌（column track）、單元格（cell）和間隙（gap）等等。通過使用這些概念，開發者可以精确控制網格中每個網格項的大小和位置，進而實作更具有創意和藝術性的頁面設計。

Grid布局廣泛用于複雜的Web頁面布局，比如新聞門戶，電商網站等等。由于它提供了靈活和精确的定位方式，使得它在業内越來越受到歡迎，并且在CSS布局的發展曆程中扮演着非常關鍵的角色。

3.2 Grid容器和Grid項目

在Grid布局中，Grid容器和Grid項目是兩個核心概念。

Grid容器是應用Grid布局的元素，它可以定義為一個具有display: grid或display: inline-grid屬性的元素。在Grid容器内部，可以通過定義網格（grid）來劃分網格區域，進而實作網格化布局。

Grid項目是Grid容器中的元素，它們被放置于網格之中，在行和列之間進行布局。每個Grid項目可以被通路并控制，其位置和大小可以精确地指定。在Grid項目中，還可以通過grid-row和grid-column屬性來設定對應的行和列，也可以使用grid-area屬性來同時設定行、列、起始以及結束位置。

在Grid容器中，可以使用grid-template-rows和grid-template-columns屬性來定義網格的行和列，進而确定網格的大小和列數。Grid容器中的網格可以具有不同的大小、位置和間隔，開發者可以通過指定網格的行和列來精确控制每個Grid項目在網格中的位置和大小。

通過使用Grid容器和Grid項目，開發者可以快速建立複雜且精細的網格布局，輕易地實作類似于表格布局的效果，而不必在HTML代碼中嵌套大量的div元素，提高了頁面布局的靈活性和可讀性。

3.3 Grid容器的屬性

3.3.1 grid-template-rows和grid-template-columns

在Grid布局中，grid-template-rows和grid-template-columns屬性用于定義Grid容器的行和列的大小、數量以及屬性。

grid-template-rows屬性可以指定每一行的高度，也可以使用重複函數（repeat()）來定義重複性較高的行及其屬性。例如，以下代碼定義了一個包含三行的Grid容器，其中第一行高度為50像素，第二行和第三行的高度為自适應高度：

grid-template-rows: 50px auto auto;
           

grid-template-columns屬性則可以指定每一列的寬度，同樣也可以使用repeat()函數來定義多個重複的列。例如，以下代碼定義了一個包含四個列的Grid容器，其中第一列寬度為25%，第二列和第三列的寬度為自适應寬度，第四列的寬度為20%：

grid-template-columns: 25% auto auto 20%;
           

同時，grid-template-rows和grid-template-columns屬性也支援使用像素（px）、百分比（%）、em、rem等機關來定義寬度和高度。它們還允許使用minmax()函數來限制網格軌道的大小，也可以使用fr機關來設定根據可用空間計算的比例系數。

在grid-template-rows和grid-template-columns屬性中，使用空格或斜線符号的組合來表示相鄰的列和行。例如，下面的代碼示範了通過在grid-template-rows和grid-template-columns屬性中使用空格和斜線符号，定義一個包含不同大小網格的Grid容器：

.grid {
  display: grid;
  grid-template-rows: 200px 100px 150px;
  grid-template-columns: 100px 1fr 2fr 100px;
}

.item-1 {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

.item-2 {
  grid-row: 1 / 2;
  grid-column: 3 / 5;
}

.item-3 {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

.item-4 {
  grid-row: 3 / 4;
  grid-column: 4 / 5;
}
           

通過以上代碼，我們可以看到grid-template-rows和grid-template-columns屬性提供了靈活的方式來定義網格的大小、資産和數量等，進而實作更精細化和靈活的布局。

3.3.2 grid-template-areas

grid-template-areas屬性是Grid布局中用于定義網格區域的一種方式，它允許開發者通過在Grid容器中使用名稱來定義一組網格區域，并将這些網格區域配置設定給特定的Grid項目。

使用grid-template-areas屬性，我們可以在Grid容器中定義名稱為字元串的矩陣。例如：

grid-template-areas:
  "header header header"
  "sidebar content content"
  "footer footer footer";
           

在這個例子中，我們定義了一個三行三列的網格區域，每個區域被命名為header、sidebar、content和footer。然後，我們可以将Grid項目安排到這些命名區域中，如下所示：

grid-area:
  header header header
  sidebar content content
  footer footer footer;
           

在這個例子中，我們按照定義的網格區域名稱，将Grid項目配置設定到header、sidebar、content和footer的相應網格區域中。與使用grid-row和grid-column屬性相比，使用grid-template-areas可以更直覺地表示網格布局結構，友善開發者快速建立并修改複雜網格布局。

需要注意的是，使用grid-template-areas屬性時必須使用相同數量的名稱來定義網格區域，如果定義的網格區域不相等，則網格不會正确地顯示。此外，如果不希望使用矩陣定義網格區域，則可以使用grid-row和grid-column屬性來配置設定網格項目的位置。

3.3.3 grid-auto-rows和grid-auto-columns

在使用Grid布局時，grid-auto-rows和grid-auto-columns屬性可用于給未定義行和列設定高度或寬度。這兩個屬性與grid-template-rows和grid-template-columns屬性有所不同，它們的作用是處理那些沒有顯式聲明大小的網格軌道。

grid-auto-rows屬性用于給未定義的行設定預設的高度。這個屬性可以使用任何長度機關來設定高度的大小。例如，以下代碼将未定義的行的高度設定為50像素：

grid-auto-rows: 50px;
           

grid-auto-columns屬性用于給未定義的列設定預設的寬度。同樣，這個屬性也可以使用任何長度機關來設定寬度的大小。例如，以下代碼将未定義的列的寬度設定為100像素：

grid-auto-columns: 100px;
           

在實際開發中，有的時候隻定義了行和列的一部分，而剩餘的部分則通過grid-auto-rows和grid-auto-columns屬性來設定網格軌道的大小。這樣就可以精确控制所有網格軌道的大小，進而更好地實作網格布局。

需要注意的是，如果一個網格單元格跨越了不止一個未定義的行或列，則需要在grid-auto-rows和grid-auto-columns屬性中設定足夠的大小為其提供足夠的空間。是以，在設計網格化布局時應該根據具體情況，謹慎地定義這兩個屬性的值，以滿足網格布局的需求。

3.3.4 grid-auto-flow

在Grid布局中，grid-auto-flow屬性可用于控制自動生成的網格布局方式。

grid-auto-flow屬性的預設值為row，它表示Grid項目在容器中的自動流動方式按照行的順序排列。也就是說，從左到右，從上到下。如果我們要改變這種預設流動方式，可以在grid-auto-flow屬性中，設定為column表示按照列的順序排列，也就是從上到下，從左到右；設定為dense表示自動填充未占用的網格區域，以最大程度利用空間。

例如，下面是一個包含了10個Grid項目的Grid容器，我們通過grid-auto-flow: row dense将自動流程設定為按行排列和稠密占用未使用的區域：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
}

.item {
  background-color: #ccc;
  height: 100px;
  width: 100px;
}
           

在上面例子中，我們将Grid容器的自動流程設定為按行自動流動，并指定了dense選項。當Grid項目的尺寸或位置不規則時，dense選項将占用未使用的網格區域，以最大程度利用Grid容器中的空間。

總的來說，grid-auto-flow屬性提供了很多的自由度，使得我們在網格布局中更加靈活地控制Grid項目之間的位置和流動方式。

3.3.5 grid

grid是CSS中，用于設定Grid布局的簡寫屬性。它可用于一次性設定所有與Grid布局有關的屬性，包括grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow以及與Grid項目相關聯的屬性。

當使用grid屬性時，需要将這些屬性的值通過空格、斜線或字元串的形式連接配接起來。例如以下代碼實作一個包含三行三列網格布局的Grid容器，其中第二行和第三行的高度為自适應高度：

grid: 
  "A B C" 100px
  "D E F" auto
  "G H I" auto / 1fr 2fr 1fr;
           

在這個例子中，我們首先定義了一個3x3的網格布局，其中第二行和第三行的高度設定為auto，其餘行的高度為100像素。然後，我們使用斜線符号将行屬性和列屬性分開，并使用1fr、2fr和1fr将列進行均分。最終，我們将grid-template-areas屬性省略掉了，因為我們不需要給每個網格區域命名。

grid屬性可以簡化CSS樣式表的書寫，将所有與Grid布局相關的代碼組織在一起，更便于開發者的編寫和維護。

3.4 Grid項目的屬性

3.4.1 grid-row-start

grid-row-start是Grid布局中用于指定網格項開始放置行的起點位置的屬性。它可以接受數字和關鍵字值作為輸入，并與其他 Grid 屬性聯合使用，以指定網格項放置和調整它在 Grid 容器中的位置的方式。

具體來說，grid-row-start屬性指定網格項開始放置的行的起點位置。它可以接受以下類型的值：

• <line-number>：具有整數值的表示行線的編号，從 1 開始（類似于grid-row: <line-number> / <line-number>;）
• <custom-ident>：自定義辨別符的名稱（類似于grid-row: <custom-ident>;）
• span <number>：指定網格項橫跨多少個單元格（類似于grid-row: span <number>;）
• span <custom-ident>：指定網格項橫跨多少個命名的行（類似于grid-row: span <custom-ident>;）

例如，以下代碼顯示了一個簡單的 Grid 布局，其中兩個網格項跨越兩個行：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}

.item1 {
  background-color: red;
  grid-row-start: 1;
  grid-row-end: 3;
}

.item2 {
  background-color: blue;
  grid-row: 2 / 4;
}
           

在這個例子中，我們定義了一個3列2行的 Grid 容器，并設定了兩個子元素，其中一個元素跨越了第1行和第2行，另一個元素跨越了第2行和第3行。其中，.item1 等價于 grid-row-start: 1; grid-row-end: 3;，.item2 等價于 grid-row: 2 / 4;。這兩種寫法都可以達到同樣的效果，其中 grid-row 是 grid-row-start 和 grid-row-end 的簡寫方式。

3.4.2 grid-row-end

grid-row-end是Grid布局中用于指定網格項結束放置行的終點位置的屬性。它可以接受數字和關鍵字值作為輸入，并與其他 Grid 屬性聯合使用，以指定網格項放置和調整它在 Grid 容器中的位置的方式。

具體來說，grid-row-end屬性指定網格項結束放置的行的終點位置。與grid-row-start不同的是，grid-row-end屬性接受的值的範圍是從指定的起點位置到下一個位置。它可以接受以下類型的值：

• <line-number>：具有整數值的表示行線的編号，從 1 開始（類似于grid-row: <line-number> / <line-number>;）
• <custom-ident>：自定義辨別符的名稱（類似于grid-row: <custom-ident>;）
• span <number>：指定網格項橫跨多少個單元格（類似于grid-row: <line-number> / span <number>;）
• span <custom-ident>：指定網格項橫跨多少個命名的行（類似于grid-row: <line-number> / span <custom-ident>;）

例如，以下代碼顯示了一個簡單的 Grid 布局，其中一個網格項跨越了兩個行：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}

.item {
  background-color: red;
  grid-row-start: 1;
  grid-row-end: 3;
}
           

在這個例子中，我們定義了一個3列2行的 Grid 容器，并設定了一個子元素，它跨越了第1行和第2行，并占用了所有列。其中，.item 的起點為第1行，終點為第3行。如果僅使用grid-row屬性，則等價于grid-row: 1 / 3;。

總的來說，grid-row-end屬性非常适合于定義跨越多行或多列的網格項，以及在 Grid 容器中調整網格項的位置和大小。

3.4.3 grid-column-start

grid-column-start是Grid布局中用于指定網格項開始放置列的起點位置的屬性。它可以接受數字和關鍵字值作為輸入，并與其他 Grid 屬性聯合使用，以指定網格項放置和調整它在 Grid 容器中的位置的方式。

具體來說，grid-column-start屬性指定網格項開始放置的列的起點位置。它可以接受以下類型的值：

• <line-number>：具有整數值的表示列線的編号，從 1 開始（類似于grid-column: <line-number> / <line-number>;）
• <custom-ident>：自定義辨別符的名稱（類似于grid-column: <custom-ident>;）
• span <number>：指定網格項橫跨多少個單元格（類似于grid-column: span <number>;）
• span <custom-ident>：指定網格項橫跨多少個命名的列（類似于grid-column: span <custom-ident>;）

例如，以下代碼顯示了一個簡單的 Grid 布局，其中兩個網格項跨越了兩個列：

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: 100px 100px;
}

.item1 {
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 3;
}

.item2 {
  background-color: blue;
  grid-column: 2 / 4;
}
           

在這個例子中，我們定義了一個3列2行的 Grid 容器，并設定了兩個子元素，其中一個元素跨越了第1列和第2列，另一個元素跨越了第2列和第3列。其中，.item1 等價于 grid-column-start: 1; grid-column-end: 3;，.item2 等價于 grid-column: 2 / 4;。這兩種寫法都可以達到同樣的效果，其中 grid-column 是 grid-column-start 和 grid-column-end 的簡寫方式。

總的來說，grid-column-start屬性非常适合于在 Grid 容器中定義跨越多行或多列的網格項，以及調整網格項的位置和大小。

3.4.4 grid-column-end

grid-column-end是Grid布局中用于指定網格項結束放置列的終點位置的屬性。它可以接受數字和關鍵字值作為輸入，并與其他 Grid 屬性聯合使用，以指定網格項放置和調整它在 Grid 容器中的位置的方式。

具體來說，grid-column-end屬性指定網格項結束放置的列的終點位置。與grid-column-start不同的是，grid-column-end屬性接受的值的範圍是從指定的起點位置到下一個位置。它可以接受以下類型的值：

• <line-number>：具有整數值的表示列線的編号，從 1 開始（類似于grid-column: <line-number> / <line-number>;）
• <custom-ident>：自定義辨別符的名稱（類似于grid-column: <custom-ident>;）
• span <number>：指定網格項橫跨多少個單元格（類似于grid-column: <line-number> / span <number>;）
• span <custom-ident>：指定網格項橫跨多少個命名的列（類似于grid-column: <line-number> / span <custom-ident>;）

例如，以下代碼顯示了一個簡單的 Grid 布局，其中一個網格項跨越了兩個列：

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: 100px 100px;
}

.item {
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 3;
}
           

在這個例子中，我們定義了一個3列2行的 Grid 容器，并設定了一個子元素，它跨越了第1列和第2列，并占用了所有行。其中，.item 的起點為第1列，終點為第3列。如果僅使用grid-column屬性，則等價于grid-column: 1 / 3;。

總的來說，grid-column-end屬性非常适合于在 Grid 容器中定義跨越多行或多列的網格項，以及調整網格項的位置和大小。

3.4.5 grid-row和grid-column

grid-row和grid-column是Grid布局中的簡寫屬性，可以同時指定網格項開始放置的行和列，以及結束放置的行和列。grid-row和grid-column屬性均由兩個值組成，第一個值表示開始位置，第二個值表示結束位置。

這兩個屬性可以接受以下類型的值：

• <line>：表示表示網格線的編号或自定義名稱；
• span <number>：表示跨越多少個網格線；
• span <name>：表示跨越多少個自定義名稱的網格線。

例如，以下代碼展示了如何使用grid-row和grid-column屬性：

.item {
  grid-row: 1 / 3; /* 從第1行到第3行 */
  grid-column: 2 / 4; /* 從第2列到第4列 */
}
           

在這個例子中，我們定義了一個.item元素，使用grid-row屬性指定了該元素應該跨越從第1行到第3行，在列方向上使用grid-column屬性指定了該元素應該跨越從第2列到第4列。這意味着該元素将占用第1、2行和第2、3、4列的所有單元格。

總的來說，使用grid-row和grid-column屬性能夠使網格項的位置和大小更加直覺地描述，并且更容易調整。

3.4.6 grid-area

grid-area是Grid布局中用于同時指定網格項開始放置的行和列以及結束放置的行和列的簡寫屬性。它可以接受數字和關鍵字值作為輸入，并與其他 Grid 屬性聯合使用，以指定網格項放置和調整它在 Grid 容器中的位置的方式。

grid-area屬性由4個值組成，分别表示網格項的開始行、開始列、結束行和結束列。可以使用下列三種方法指定grid-area屬性的值：

• 使用數值和斜線指定起始行和起始列，緊接着使用數值和斜線指定結束行和結束列：grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
• 使用自定義命名網格的名稱來代替行或列起始和結束位置的數值：grid-area: <name> [<row-start> / <column-start> / <row-end> / <column-end>];
• 使用row-span或col-span指定跨越多少行或列：grid-area: <row-start> / <column-start> / span <row-span> / span <col-span>;

例如，以下代碼展示了如何使用grid-area屬性：

.item {
  grid-area: 1 / 2 / 3 / 4;
}
           

在這個例子中，我們定義了一個.item元素，使用grid-area屬性指定了它所跨越的區域，從第1行和第2列開始，到第3行和第4列結束，它将占用第1、2、3行和第2、3、4列的所有單元格。

總的來說，使用grid-area屬性友善地指定了網格項的開始和結束位置，并可以使網格項的位置和大小更加直覺地描述。

4. 比較

4.1 Flex布局與Grid布局的異同

Flex布局和Grid布局是兩種不同的CSS布局模式，它們各自采用不同的政策來對元素進行排列和定位。這裡列出一些它們之間的異同點：

異同之處：

1. 相對定位和絕對定位

Flex布局是基于相對定位模型的，它的主要目的是對元素進行适應性布局，相對容器或其他元素進行定位，進而在可變螢幕尺寸和裝置上改變它們的位置和大小。而Grid布局是基于絕對定位模型的，它的主要目的是在父級網格容器的單元格中對元素進行排列和定位。

2. 方向

Flex布局隻能在主軸和交叉軸方向上排列元素，而Grid布局則可以在行和列上排列元素。

3. 屬性

Flex布局具有的主要屬性有flex-direction、justify-content、align-items和align-content等。這些屬性用于控制Flex容器内Flex項在主軸和交叉軸方向上的位置、對齊方式和空間分布情況，其中flex-direction用于控制主軸方向。而Grid布局則擁有grid-template-rows、grid-template-columns、grid-template-areas等屬性。這些屬性用于定義網格容器的行和列，在行和列上排列和定位網格項。

4. 實作方式

Flex布局通過在Flex容器上應用display: flex屬性來啟用，并與Flex項目使用諸如flex-grow、flex-shrink和flex-basis等屬性，來指定在空間分布方案。而Grid布局通過在父級元素上應用display: grid來啟用，并與網格項使用類似于grid-column和grid-row這樣的屬性，以指定它們的位置和大小。

相同之處：

1. 容器和項目

Flex布局和Grid布局都基于容器和項目的概念，在容器中包含多個項目，并對這些項目進行計算和布局。

2. 響應式設計

Flex布局和Grid布局都是響應式布局，可以在不同的裝置上和螢幕尺寸下自适應排列和定位元素。

總的來說，這兩種布局模式都有其特定的用途和優點，可以根據不同的需求和場景進行選擇和應用。Flex布局适用于需要快速實作适應性布局的小型項目，而Grid布局則更适用于大型網格布局項目。

4.2 如何選擇Flex布局或Grid布局？

根據項目的需求和設計，選擇适合的布局模式是非常重要的。

以下是一些考慮以及建議的情況，有助于決定使用Flex布局還是Grid布局：

1. 需要在單行或單列中排列和對齊元素時，可以使用Flex布局。例如，設計一個水準導覽列、水準的圖文清單以及一個垂直列布局等等。
2. 當需要在多行或多列中建立一個網格布局時，可以使用Grid布局。比如設計一個相冊子產品，産品展示子產品等等。Grid 布局以其對齊和羅列功能的出衆性能而聞名。
3. 如果布局需要同時支援網格和工具欄等外觀，建議使用Flex布局。因為Flex布局更加靈活适應性強，在整個螢幕上都可以進行排列和對齊。
4. 如果需要實作項目間比例關系的控制，建議使用Flex布局。因為Flex布局很容易實作元素的比例調整，而Grid布局則需要在行和列上進行指定。
5. 如果網格布局需要對項目進行複雜的定位操作，建議使用Grid布局。因為Grid布局提供了更多的定位、調整和動态響應機制。

總而言之，選擇使用Flex布局還是Grid布局取決于你的項目和需求。它們都有自己的優點和局限性，了解這些優點和局限性并靈活應用它們，可以幫助你更好地設計适應性的Web界面。