本文目錄導(dǎo)讀：

1. 橫向布局
2. 縱向布局

CSS中的布局方式主要有橫向和縱向兩種，下面分別介紹如何實現(xiàn)這兩種布局。

橫向布局

橫向布局是指元素在水平方向上排列，在CSS中，可以使用flex布局來實現(xiàn)橫向布局，flex布局是一種靈活的布局方式，可以輕松地實現(xiàn)元素的水平排列和對齊。

以下代碼可以實現(xiàn)一個包含三個元素的橫向布局：

.container {
  display: flex;
  justify-content: space-between;
}
.item {
  width: 33.33%;
  height: 200px;
  background-color: #f00;
}

在這個例子中，我們創(chuàng)建了一個名為.container的容器，并設(shè)置其display屬性為flex，使其成為一個flex容器，我們使用justify-content屬性將容器內(nèi)的元素水平排列，并設(shè)置每個元素的寬度為容器寬度的33.33%，我們?yōu)槊總€元素設(shè)置了一個高度和背景顏色。

縱向布局

縱向布局是指元素在垂直方向上排列，在CSS中，可以使用flex布局或column布局來實現(xiàn)縱向布局，column布局是一種將元素垂直排列的塊級布局方式。

以下代碼可以實現(xiàn)一個包含三個元素的縱向布局：

.container {
  column-count: 3;
  column-gap: 20px;
}
.item {
  height: 200px;
  background-color: #f00;
}

在這個例子中，我們創(chuàng)建了一個名為.container的容器，并設(shè)置其column-count屬性為3，使其成為一個包含三個列的容器，我們使用column-gap屬性設(shè)置列與列之間的間隔，我們?yōu)槊總€元素設(shè)置了一個高度和背景顏色。