CSS中篇

#Flex布局#

1、什么是flex布局？

flex 布局，全稱彈性布局（Flexible Box Layout），是 CSS3 中引入的一種新的布局模式。它主要通過給容器設置相關屬性，來控制容器內部子元素的排列方式。相比傳統的浮動布局和定位布局，flex 布局更加靈活、直觀，尤其適合響應式設計。?

簡單來說，使用 flex 布局時，我們會有一個 “容器”，容器里面的元素被稱為 “項目”。容器就像一個彈性的盒子，項目會根據容器的設置，以彈性的方式進行排列。

2、如何開啟 flex 布局？

開啟 flex 布局非常簡單，只需要給容器添加display: flex;屬性即可。例如：

.container {display: flex;
}

當容器設置為 flex 布局后，它的子元素（項目）就會自動成為 flex 項目，此時項目的 float、clear 和 vertical-align 屬性將失效。

3、flex 布局的核心概念

主軸：flex 項目默認沿著主軸排列。主軸的方向可以是水平的（默認，從左到右），也可以通過屬性修改為垂直的（從上到下）等。?

交叉軸：與主軸垂直的軸就是交叉軸。主軸方向變化時，交叉軸方向也會相應變化。

4、容器的主要屬性

容器上有很多重要的屬性，通過設置這些屬性，可以改變項目的排列方式。?

1、flex-direction：決定主軸的方向?

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

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

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

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

2、justify-content：定義項目在主軸上的對齊方式

flex-start（默認）：左對齊。?

flex-end：右對齊。?

center：居中。?

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

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

3、align-items：定義項目在交叉軸上的對齊方式

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

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

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

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

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

4、flex-wrap：定義項目是否換行

nowrap（默認）：不換行，項目會壓縮寬度以適應容器。?

wrap：換行，第一行在上方。?

wrap-reverse：換行，第一行在下方。

5、align-content：定義多根軸線的對齊方式（如果項目只有一根軸線，該屬性不起作用）

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

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

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

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

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

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

5、項目的主要屬性

除了容器的屬性，項目也有一些常用的屬性，可以單獨控制某個項目的表現。

1、flex-grow：定義項目的放大比例，默認為 0，即如果存在剩余空間，也不放大。當所有項目的 flex-grow 屬性都為 1 時，它們將等分剩余空間；如果其中一個項目的 flex-grow 屬性為 2，其他項目都為 1，則前者占據的剩余空間將比其他項多一倍。

2、flex-shrink：定義項目的縮小比例，默認為 1，即如果空間不足，項目將縮小。如果一個項目的 flex-shrink 屬性為 0，其他項目都為 1，則空間不足時，前者不縮小。

3、flex-basis：定義在分配多余空間之前，項目占據的主軸空間。默認值為 auto，即項目的本來大小。

4、flex：是 flex-grow、flex-shrink 和 flex-basis 的簡寫，默認值為 0 1 auto。該屬性有兩個快捷值：auto（1 1 auto）和 none（0 0 auto）。

5、align-self：允許單個項目有與其他項目不同的對齊方式，可覆蓋 align-items 屬性。默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。其取值與 align-items 類似。

6、order：定義項目的排列順序。數值越小，排列越靠前，默認為 0。

6、注意事項

當容器設置為 flex 布局后，子元素的 float、clear 和 vertical-align 屬性失效。?

flex 布局是單向的，要么沿主軸排列，要么沿交叉軸排列，不能同時在兩個方向上進行復雜的排列。?

在使用 flex-wrap: wrap 時，要注意項目的寬度設置，避免出現意想不到的換行效果。

#Grid布局#

1、Grid布局是什么？

grid 布局，即網格布局，是 CSS 中另一種強大的布局模式。它與 flex 布局不同，flex 布局主要處理一維布局（要么是行，要么是列），而 grid 布局則是專門為二維布局（同時處理行和列）設計的。?

可以把 grid 布局想象成一張表格，有行和列，行和列交叉形成的區域就是單元格，我們可以把元素放在這些單元格中，還能讓元素跨多行或多列。

2、如何開啟 grid 布局？

開啟 grid 布局也很簡單，給容器添加display: grid;屬性就行。例如：

.container {display: grid;
}

當容器設置為 grid 布局后，它內部的子元素就成為了 grid 項目。

3、grid 布局的核心概念

要理解 grid 布局，需要先清楚這些核心概念：?

容器：設置了display: grid;的元素，是所有項目的父元素。?

項目：容器內部的子元素。?

行和列：容器被劃分成若干水平的行和垂直的列。?

行間距和列間距：行與行之間的距離叫行間距，列與列之間的距離叫列間距。?

單元格：行和列交叉形成的最小單位。?

網格線：劃分行和列的線，水平的是行網格線，垂直的是列網格線。

4、容器的主要屬性

（1）、grid-template-columns 和 grid-template-rows：定義列的寬度和行的高度?，可以直接指定具體的長度，也可以使用 fr 單位（表示剩余空間的等分比例）。

.container {display: grid;grid-template-columns: 100px 1fr 2fr; /* 三列，第一列寬100px，第二列占1份剩余空間，第三列占2份 */grid-template-rows: 50px 100px; /* 兩行，第一行高50px，第二行高100px */
}

還可以使用repeat()函數簡化重復的值，比如grid-template-columns: repeat(3, 100px);表示三列，每列寬 100px。

（2）、grid-row-gap 和 grid-column-gap：設置行間距和列間距，也可以用grid-gap簡寫（grid-gap: 行間距列間距;）。

.container {grid-row-gap: 10px;grid-column-gap: 20px;/* 等同于 grid-gap: 10px 20px; */
}

在較新的 CSS 標準中，這些屬性的前綴grid-可以省略，直接寫row-gap、column-gap、gap。

（3）、grid-template-areas：定義網格區域。先給項目指定grid-area屬性命名，然后在容器中用grid-template-areas來規劃區域。

.container {grid-template-areas:"header header header""sidebar main main""footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

這樣就定義了一個三行三列的網格，第一行是 header 區域，第二行左側是 sidebar 區域，右側是 main 區域，第三行是 footer 區域。

（4）、justify-items：設置項目在單元格中水平方向的對齊方式?。取值有start（左對齊）、end（右對齊）、center（居中）、stretch（拉伸，占滿單元格寬度，默認值）。?

（5）、align-items：設置項目在單元格中垂直方向的對齊方式?。取值有start（上對齊）、end（下對齊）、center（居中）、stretch（拉伸，占滿單元格高度，默認值）。?

（6）、justify-content：當網格總寬度小于容器寬度時，設置網格在容器水平方向的對齊方式?。取值有start、end、center、space-around（網格兩側間距相等，網格之間間距是兩側的兩倍）、space-between（網格之間間距相等，兩側沒有間距）、space-evenly（網格之間和兩側的間距都相等）。?

（7）、align-content：當網格總高度小于容器高度時，設置網格在容器垂直方向的對齊方式?。取值與justify-content類似。

5、項目的主要屬性

項目也有一些屬性來控制自身的位置和大小：?

1、grid-column-start 和 grid-column-end：設置項目所占列的起始和結束位置（基于列網格線）?

例如，grid-column-start: 1; grid-column-end: 3;表示項目從第 1 根列網格線開始，到第 3 根列網格線結束，也就是跨 2 列。可以簡寫為grid-column: 1 / 3;。?

2、grid-row-start 和 grid-row-end：設置項目所占行的起始和結束位置（基于行網格線）?

類似列的設置，簡寫為grid-row: 1 / 3;，表示項目跨 2 行。?

3、grid-area：有兩個作用，一是給項目命名（配合容器的grid-template-areas使用），二是直接指定項目的位置，是grid-row-start、grid-row-end、grid-column-start、grid-column-end的簡寫，格式為grid-area: 行起始 / 列起始 / 行結束 / 列結束;。?

4、justify-self：設置單個項目在單元格水平方向的對齊方式，可覆蓋容器的justify-items屬性，取值與justify-items相同。?

5、align-self：設置單個項目在單元格垂直方向的對齊方式，可覆蓋容器的align-items屬性，取值與align-items相同。