溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用CSS3實現(xiàn)彈性盒子的布局方式

發(fā)布時間：2020-07-08 14:48:37 來源：億速云 閱讀：139 作者：Leah 欄目：web開發(fā)

這篇文章運(yùn)用簡單易懂的例子給大家介紹使用CSS3實現(xiàn)彈性盒子的布局方式，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

傳統(tǒng)的布局方案是依據(jù)float，display和position的盒子模型，隨著開發(fā)語言的完善，彈性盒布局模型成為Web開發(fā)人員工具箱中的一個很好的工具，因為擯棄了傳統(tǒng)盒子復(fù)雜的設(shè)置并且可以很完美的契合開發(fā)者對于頁面兼容性的要求，即當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時依然可以確保元素?fù)碛星‘?dāng)?shù)男袨椤１酒恼陆o大家?guī)淼膬?nèi)容是關(guān)于如何快速使用彈性盒子布局，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

對于彈性盒子的理解

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成，而彈性容器則可以通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器，其中彈性容器內(nèi)可以包含了一個或多個彈性子元素。

傳統(tǒng)的盒子模型對于那些特殊頁面的布局非常的不方便，比如垂直居中，子元素排序的實現(xiàn)就很麻煩。然而隨著w3c提出了flex布局，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局，大大的簡化了開發(fā)過程，并且Flex布局已經(jīng)得到了所有的瀏覽器的支持。

彈性盒子的實例

實例一：傳統(tǒng)模型

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 450px;
            height: 150px;
            background-color: darkcyan;
                     }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
                 }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

結(jié)構(gòu)如圖所示

使用CSS3實現(xiàn)彈性盒子的布局方式

實例二：子元素排序

<style> 
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 450px;
            background-color: darkcyan;
            flex-direction: row-reverse;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

結(jié)構(gòu)如圖所示

使用CSS3實現(xiàn)彈性盒子的布局方式

實例三：盒子居中顯示

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 500px;
            background-color: darkcyan;
            justify-content: center;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

結(jié)構(gòu)如圖所示

使用CSS3實現(xiàn)彈性盒子的布局方式

實例四：從底部開始顯示

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 500px;
            height: 211px;
            background-color: darkcyan;
            align-items: flex-end;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

結(jié)構(gòu)如圖所示

使用CSS3實現(xiàn)彈性盒子的布局方式

以上就是如何使用CSS3實現(xiàn)彈性盒子布局方式的詳細(xì)內(nèi)容，更多請關(guān)注億速云其它相關(guān)文章！

關(guān)于使用CSS3實現(xiàn)彈性盒子的布局方式就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手