溫馨提示×

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

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

CSS實(shí)現(xiàn)flexbox彈性盒子的方法

發(fā)布時(shí)間：2020-08-31 14:35:15 來源：億速云 閱讀：136 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)CSS實(shí)現(xiàn)flexbox彈性盒子的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在CSS3彈性盒子模型中，我們可以使用box-flex屬性來定義彈性盒子內(nèi)部的子元素是否具有彈性空間。如果子元素具有彈性空間，當(dāng)彈性盒子（父元素）的尺寸放大或縮小的時(shí)候，具有彈性空間的子元素的尺寸也會(huì)放大或縮小。每當(dāng)彈性盒子有額外的空間時(shí)，具有彈性空間的子元素也會(huì)擴(kuò)大自身大小來填補(bǔ)這一空間。

說明：

box-flex屬性取值是一個(gè)整數(shù)或者小數(shù)，不可為負(fù)數(shù)，默認(rèn)值為0。

當(dāng)盒子中包含多個(gè)定義了box-flex屬性的子元素時(shí)，瀏覽器將會(huì)把這些子元素的box-flex屬性值相加，然后根據(jù)它們各自的值占總值的比列來分配盒子剩余的空間。

注意，box-flex屬性只有在彈性盒子確定了寬度或高度才有效。也就是說必須要先為父元素定義width或者h(yuǎn)eight屬性值。

使用彈性空間設(shè)置，使得彈性盒子內(nèi)部元素的總寬度和總高度，始終等于彈性盒子的寬度與高度。不過只有當(dāng)彈性盒子具有確定的寬度或高度時(shí)，子元素的彈性空間才生效。

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-flex屬性</title>
    <style type="text/css">
        body
        {
            display:-webkit-box;
            -webkit-box-orient:horizontal;   /*定義盒子元素內(nèi)的元素從左到右流動(dòng)顯示*/
            width:200px;
            height:150px;
        }
        #box1
        {
            background:red;
            -webkit-box-flex:1.0;
        }
        #box2
        {
            background:blue;
            -webkit-box-flex:2.0;
        }
        #box3
        {
            background:orange;
            -webkit-box-flex:1.0;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

在瀏覽器預(yù)覽效果如下：

CSS實(shí)現(xiàn)flexbox彈性盒子的方法

分析：

這里使用“box-orient:horizontal;”定義彈性盒子內(nèi)部子元素水平排列，并且給彈性盒子指定了寬度為200px。之后我們只需要使用box-flex屬性給每一個(gè)子元素指定一個(gè)值，瀏覽器就會(huì)自動(dòng)計(jì)算每個(gè)子元素所占的比例，自動(dòng)劃分寬度。

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

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

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

AI
助
手