在前端開發(fā)過程中，網(wǎng)頁(yè)布局一直是一個(gè)重要的問題。除了傳統(tǒng)的表格布局和浮動(dòng)布局，CSS近年來(lái)推出了一些新的等分布局方式，使得布局更加靈活方便。

下面介紹幾種常用的等分布局方式：

Flex布局

.container {
display: flex;
}
.item {
flex: 1;
}

通過給容器添加display:flex屬性，可以使其內(nèi)部的子元素等分布局。子元素使用flex:1屬性，可以讓它們平均分配剩余空間。

Grid布局

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

在Grid布局中，通過設(shè)置網(wǎng)格列的數(shù)量，可以實(shí)現(xiàn)等分布局。其中repeat參數(shù)中，第一個(gè)參數(shù)表示網(wǎng)格列的數(shù)量，第二個(gè)參數(shù)1fr代表所有網(wǎng)格列等寬。這種方式可以實(shí)現(xiàn)多種靈活的布局效果。

Table布局

.container {
display: table;
width: 100%;
}
.item {
display: table-cell;
width: 33.33%;
}

雖然Table布局在現(xiàn)代Web開發(fā)中已經(jīng)不常用，但是它也是實(shí)現(xiàn)等分布局的一種方式。通過將容器的display屬性設(shè)置為table，子元素設(shè)置為table-cell，再使用width屬性對(duì)子元素進(jìn)行等分，就可以實(shí)現(xiàn)等分布局。