CSS3 Grid和Flex是Web開發(fā)中最常用的兩個工具之一，它們提供了一種新的方式來布局和排列頁面元素，使得頁面的結構更加靈活和易于維護。下面我們來分別介紹一下Grid和Flex的基本用法。

CSS3 Grid

CSS3 Grid布局是一種二維表格布局方式，可以將頁面分成多個區(qū)塊，在不同的區(qū)塊中擺放不同的元素，并能夠定義區(qū)塊之間的關系和排列方式。以下是一個簡單的CSS3 Grid布局：

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 150px 100px;
grid-gap: 10px;
}
.item {
background-color: #f2f2f2;
}

上述代碼定義了一個容器（class為.container），將頁面分成3列、2行的區(qū)塊，每個區(qū)塊的高度分別為150px、100px，同時設置了區(qū)塊之間的間隔為10px。 .item是放在.layout內(nèi)的元素，可以使用如下代碼來控制其位置：

.item {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}

上述代碼將.item放在了第1列、第1行到第3行之間的位置。

CSS3 Flex

CSS3 Flex布局是一種一維排列方式，將元素沿著一條線性軸進行排列，可以設置沿主軸和側軸的對齊方式、排列方式等。以下是一個簡單的CSS3 Flex布局：

.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
background-color: #f2f2f2;
margin: 10px;
}

上述代碼定義了一個容器（class為.container），設置其為Flex布局，并讓內(nèi)部的元素在水平和垂直方向上都居中對齊。 .item是放在.layout內(nèi)的元素，由于我們設置了.container為Flex布局，所以.item會按照一定的順序進行排列。我們可以使用如下代碼來控制其順序：

.item:nth-child(2) {
order: 2;
}

上述代碼將第2個.item排在了第一個.item的后面。

總體來說，CSS3 Grid和Flex為Web開發(fā)者提供了更加靈活、高效的頁面排版方式，可以讓我們更加輕松地實現(xiàn)各種頁面布局效果。