「这是我参与11月更文挑战的第八天，活动详情查看：2021最后一次更文挑战」。

往期推荐：

「CSS布局之全屏布局」

「CSS布局（二）之多列布局」

前言

今天要介绍的等分布局，通过三种方法实现，let's go!!!

等分布局

• 等分布局：由多列组成，每列的宽度和高度都是固定并且相等，由此，可以说实现的方法有很多种了。总的来说，算是一种比较简单的布局了。

<div class="layout">
  <div class="layout-one"></div>
  <div class="layout-two"></div>
  <div class="layout-three"></div>
  <div class="layout-four"></div>
</div>

.layout-one {
    background-color: crimson;
}
.layout-two {
    background-color: orange;
}
.layout-three {
    background-color: yellow;
}
.layout-four {
    background-color: green;
}
  

通过百分比/float:left来实现

既然是等宽登高的，完全可以通过根据所需要的列数除以100换算出百分比就可以得出每列的占比，在设置左浮动就可以了。

.layout {
  width: 920px;
  height: 880px;
  div {
      float: left;
      width: 25%;
      height: 100%;
  }

}

通过column-count实现

还是如上所说，既然登高等宽，列排版必然是首选，而且相应的语义化更明显。

.layout {
  width: 920px;
  height: 880px;
  column-count: 4; // 列数
  column-gap: 0; // 每列的间隔
  div {
      height: 100%;
  }
}

通过flex实现

• 当然，flex完全是可以的，毕竟学会flex，基本上所有的布局他都可以实现。声明父容器为display：flex，这样子容器的节点高度都会进行拉伸并相等，再给每个子容器声明flex：1即可。

.layout {
  display: flex;
  width: 920px;
  height: 880px;
  div {
    flex: 1;
  }
}

注意：因为声明display：flex后，子容器的默认属性为align-items：stretch，所以子容器的高度会进行拉伸，占满父节点。

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！