首頁  >  文章  >  web前端  >  flexbox彈性盒子如何佈局?詳細教學

flexbox彈性盒子如何佈局?詳細教學

云罗郡主
云罗郡主轉載
2018-10-23 15:23:062815瀏覽

這篇文章帶給大家的內容是關於flexbox彈性盒子如何佈置?詳細教程,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

在CSS3彈性盒子模型中,我們可以使用box-flex屬性來定義彈性盒子內部的子元素是否具有彈性空間。如果子元素具有彈性空間,當彈性盒子(父元素)的尺寸放大或縮小的時候,具有彈性空間的子元素的尺寸也會放大或縮小。每當彈性盒子有額外的空間時,具有彈性空間的子元素也會擴大自身大小來填補這一空間。

說明:

box-flex屬性取值是一個整數或小數,不可為負數,預設值為0。

當盒子中包含多個定義了box-flex屬性的子元素時,瀏覽器將會把這些子元素的box-flex屬性值相加,然後根據它們各自的值佔總值的比列來分配盒子剩餘的空間。

注意,box-flex屬性只有在彈性盒子確定了寬度或高度才有效。也就是說必須先為父元素定義width或height屬性值。

使用彈性空間設置,使得彈性盒子內部元素的總寬度和總高度,總是等於彈性盒子的寬度與高度。不過只有當彈性盒子具有確定的寬度或高度時,子元素的彈性空間才會生效。

範例:

<!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;   /*定义盒子元素内的元素从左到右流动显示*/
            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>

在瀏覽器預覽效果如下:

flexbox彈性盒子如何佈局?詳細教學

分析:

這裡使用「box- orient:horizo​​ntal;」定義彈性盒子內部子元素水平排列,並且給彈性盒子指定了寬度為200px。之後我們只需要使用box-flex屬性為每個子元素指定一個值,瀏覽器就會自動計算每個子元素所佔的比例,自動劃分寬度。

以上就是flexbox彈性盒子如何佈局?詳細教學的全部介紹,如果您想了解更多有關CSS3影片教學,請關注PHP中文網。


以上是flexbox彈性盒子如何佈局?詳細教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:lvyestudy.com。如有侵權,請聯絡admin@php.cn刪除