CSS 布局是網頁設計中非常重要的一部分，它能調整網頁的排版和格式，使網頁更加清晰易讀。下面介紹一些 CSS 布局的經典例題。

/* 例題一：水平居中 */
.container {
width: 50%;
margin: 0 auto;
}
/* 例題二：兩欄布局 */
.container {
display: flex;
justify-content: space-between;
}
.col-1 {
flex-basis: 70%;
}
.col-2 {
flex-basis: 20%;
}
/* 例題三：響應式布局 */
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex-basis: 25%;
max-width: 25%;
min-width: 200px;
}
@media screen and (max-width: 767px) {
.box {
flex-basis: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 480px) {
.box {
flex-basis: 100%;
max-width: 100%;
}
}

第一個例題是水平居中，將一個元素居中可以通過設置寬度并設置 margin-left 和 margin-right 為 auto 來實現。第二個例題是兩欄布局，使用 flex 布局可以快速實現。第三個例題是響應式布局，通過媒體查詢實現不同尺寸屏幕下元素的排列方式。