css3中flex彈性盒自動鋪滿寫法

本文將為大家詳細(xì)介紹“css3中flex彈性盒自動鋪滿寫法”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會更新不同的知識點(diǎn)，希望這篇“css3中flex彈性盒自動鋪滿寫法”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

具體如下：

<style type="text/css">
    .flexcontainer{
        width:100%;
        height: 100%;
        position: absolute;
        left:0px;
        top:0px;
        display: flex;
        flex-direction: column;
    }
    .flex1 {
        width: 100%;
        height: 8rem;
        float: left;
        background: #f00;
    
    }
    .flex2 {
        width: 100%;
        height: 4rem;
        flex:1;
        float: left;
        background: #000;
    }
   .flex3 {
        width: 100%;
        height: 7rem;
        float: left;
        background: #ccc;
    }    
</style>
<div class="flexcontainer">
    <div class="flex1"></div>
    <div class="flex2"></div>
    <div class="flex3"></div>
</div>

如果你能讀到這里，小編希望你對“css3中flex彈性盒自動鋪滿寫法”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會，具體使用情況還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！