今天我們來學習一些常用的 HTML 布局代碼。

/* 文本居中 */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* 兩欄布局 */
.container {
display: flex;
}
.column1 {
flex: 1;
}
.column2 {
flex: 2;
}
/* 三欄布局 */
.container {
display: flex;
}
.column1 {
flex: 1;
}
.column2 {
flex: 2;
}
.column3 {
flex: 1;
}
/* 瀑布流布局 */
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 20px;
}

以上代碼分別實現了居中、兩欄、三欄和瀑布流布局。它們都是在 HTML 中使用 CSS 樣式實現的。你可以復制它們到你的 HTML 文件中，并按照自己的需要進行修改和調整。好的布局代碼可以讓你的網頁更美觀、易讀、易用，趕快去試一試吧！