CSS兩端布局是指在頁面中兩端對(duì)齊顯示的布局方式，也稱為“兩端對(duì)齊”布局。它適用于需要在頁面中將元素全部占滿的情況，比如導(dǎo)航欄、圖片列表等。

要實(shí)現(xiàn)兩端布局，可以使用CSS的text-align屬性和float屬性。

/* 清除浮動(dòng) */
.clearfix:after {
content: "";
display: block;
clear: both;
}
/* 上下居中 */
.container {
display: flex;
align-items: center;
}
/* 兩端布局 */
.container ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.container ul li {
width: calc(50% - 10px);
margin-bottom: 20px;
}
.container ul li:nth-child(odd) {
text-align: left;
float: left;
}
.container ul li:nth-child(even) {
text-align: right;
float: right;
}

以上代碼中，我們使用了一個(gè)clearfix類清除浮動(dòng)，使得兩端布局可以正常顯示。在.container類中，使用flex布局讓元素上下居中。在.container ul中，使用justify-content屬性讓元素兩端對(duì)齊，并使用flex-wrap屬性讓元素自適應(yīng)換行。在.container ul li中，使用calc屬性設(shè)置每個(gè)元素的寬度，使用text-align和float屬性分別將奇數(shù)和偶數(shù)個(gè)元素居左和居右。

使用CSS兩端布局可以讓頁面元素更加美觀，讓用戶對(duì)網(wǎng)站有更好的體驗(yàn)。同時(shí)，它也可以提高頁面排版的靈活性和效率。