css如何實(shí)現(xiàn)均分布局

這篇文章主要為大家展示了“css如何實(shí)現(xiàn)均分布局”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css如何實(shí)現(xiàn)均分布局”這篇文章吧。

均分布局

經(jīng)典的均分布局由多列組成，其特點(diǎn)為每列寬度相等和每列高度固定且相等。總體來(lái)說(shuō)也是最簡(jiǎn)單的經(jīng)典布局，由于每列寬度相等，所以很易找到合適的方式處理。

<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位小數(shù)，懶人還可用width:calc(100% / n)自動(dòng)計(jì)算呢。

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

flex

使用flex實(shí)現(xiàn)會(huì)更簡(jiǎn)潔。節(jié)點(diǎn)聲明display:flex后，生成的FFC容器里所有子節(jié)點(diǎn)的高度都相等，因?yàn)槿萜鞯?code>align-items默認(rèn)為stretch，所有子節(jié)點(diǎn)將占滿整個(gè)容器的高度。每列聲明flex:1自適應(yīng)寬度。

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

以上是“css如何實(shí)現(xiàn)均分布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！