css如何实现均分布局

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

均分布局

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

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

.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如何实现均分布局”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！