小編給大家分享一下css中flexbox彈性盒子如何布局，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在CSS3彈性盒子模型中，我們可以使用box-flex屬性來定義彈性盒子內部的子元素是否具有彈性空間。如果子元素具有彈性空間，當彈性盒子（父元素）的尺寸放大或縮小的時候，具有彈性空間的子元素的尺寸也會放大或縮小。每當彈性盒子有額外的空間時，具有彈性空間的子元素也會擴大自身大小來填補這一空間。
說明：
box-flex屬性取值是一個整數或者小數，不可為負數，默認值為0。
當盒子中包含多個定義了box-flex屬性的子元素時，瀏覽器將會把這些子元素的box-flex屬性值相加，然后根據它們各自的值占總值的比列來分配盒子剩余的空間。
注意，box-flex屬性只有在彈性盒子確定了寬度或高度才有效。也就是說必須要先為父元素定義width或者height屬性值。
使用彈性空間設置，使得彈性盒子內部元素的總寬度和總高度，始終等于彈性盒子的寬度與高度。不過只有當彈性盒子具有確定的寬度或高度時，子元素的彈性空間才生效。
舉例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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> |
在瀏覽器預覽效果如下：
分析：
這里使用“box-orient:horizontal;”定義彈性盒子內部子元素水平排列，并且給彈性盒子指定了寬度為200px。之后我們只需要使用box-flex屬性給每一個子元素指定一個值，瀏覽器就會自動計算每個子元素所占的比例，自動劃分寬度。
以上是“css中flexbox彈性盒子如何布局”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
