css如何实现均分布局

这篇文章主要为大家展示了"css如何实现均分布局"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"css如何实现均分布局"这篇文章吧。

均分布局

经典的均分布局由多列组成，其特点为每列宽度相等和每列高度固定且相等。总体来说也是最简单的经典布局，由于每列宽度相等，所以很易找到合适的方式处理。

.one {    background-color: #f66;}.two {    background-color: #66f;}.three {    background-color: #f90;}.four {    background-color: #09f;}

float + width

每列宽度声明为相等的百分比，若有4列则声明width:25%。N列就用公式100 / n求出最终百分比宽度，记得保留2位小数，懒人还可用width:calc(100% / n)自动计算呢。

.average-layout {    width: 400px;    height: 400px;    div {        float: left;        width: 25%;        height: 100%;    }}

flex

使用flex实现会更简洁。节点声明display:flex后，生成的FFC容器里所有子节点的高度都相等，因为容器的align-items默认为stretch，所有子节点将占满整个容器的高度。每列声明flex:1自适应宽度。

.average-layout {    display: flex;    width: 400px;    height: 400px;    div {        flex: 1;    }}

以上是"css如何实现均分布局"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！