本文目錄導讀：

1. 使用Flex布局
2. 使用Grid布局
3. 使用百分比寬度

如何設(shè)置CSS均分

CSS均分是一種在網(wǎng)頁設(shè)計中常用的技術(shù)，它可以讓元素在容器中平均分布，達到美觀的排版效果，如何設(shè)置CSS均分呢？

使用Flex布局

Flex布局是CSS3中引入的一種布局方式，它可以輕松實現(xiàn)元素的均分，在Flex布局中，我們可以使用flex屬性來定義元素在容器中的分布方式，如果想要讓兩個元素在容器中平均分布，可以這樣做：

.container {
  display: flex;
  justify-content: space-between;
}

在上面的代碼中，display: flex表示將容器轉(zhuǎn)換為Flex布局，justify-content: space-between表示在容器中的元素之間平均分配空間。

使用Grid布局

Grid布局是CSS中另一種實現(xiàn)均分的方式，在Grid布局中，我們可以使用grid-template-columns屬性來定義容器中的列數(shù)，以及每列的大小，如果想要讓兩個元素在容器中平均分布，可以這樣做：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

在上面的代碼中，display: grid表示將容器轉(zhuǎn)換為Grid布局，grid-template-columns: 1fr 1fr表示容器中有兩列，每列的大小為1fr（即剩余空間的一半）。

使用百分比寬度

除了使用Flex和Grid布局外，我們還可以使用百分比寬度來實現(xiàn)元素的均分，如果想要讓兩個元素在容器中平均分布，可以這樣做：

.container {
  width: 100%;
}
.element {
  width: 50%;
}

在上面的代碼中，width: 100%表示容器的寬度為100%，width: 50%表示每個元素的寬度為容器寬度的50%。

三種方式都可以實現(xiàn)CSS的均分效果，具體使用哪種方式取決于你的需求和設(shè)計。