CSS 布局（三）之等分布局

作者：Augus

2021 年 11 月 23 日
本文字数：777 字
阅读完需：约 3 分钟

往期推荐：

「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！！！

发布于: 2021 年 11 月 23 日阅读数: 7

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

CSS 布局（三）之等分布局

前言

等分布局

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

通过 column-count 实现

通过 flex 实现

Augus

评论