語法：
box-flex：其中number取值：使用浮點數指定物件所分配其父元素剩餘空間的比例。設定或檢索伸縮盒物件的子元素如何分配其剩餘空間。(
伸縮盒最老版本)
html**：
<css**：ul id
="box"
>
<
li>a
li>
<
li>b
li>
<
li>c
li>
ul>
#box#box li:nth-child(1)#box li:nth-child(2)#box li:nth-child(3)得到的結果如圖所示:
注：其實上面的css**中誤區：注意-ms-box-flex與box-flex可以省略，為什麼這麼說呢，ie6-ie11的瀏覽器不支援box-flex，其它核心的瀏覽器都需要加上字首如-webkit-，-moz-瀏覽器才解析這個屬性。這兒寫上是為告訴大家，為了讓css3屬性相容，一般都這麼寫完整而已。下面會說一下瀏覽器的相容。
box-flex只是動態分配父元素的剩餘空間，而不是整個父元素的空間。如上例，父元素#box的寬度為240px，如果你認為a,b,c的寬度分別為60, 60, 120那麼就錯了，因為box-flex只是分配父元素的剩餘空間而已，所以a,b,c所分到的應該是除內容外所剩餘下來的寬度
為了清晰所謂的剩餘空間分配，對上例稍作修改，html code不變
css**：
#box#box li#box li:nth-child(1)#box li:nth-child(2)#box li:nth-child(3)結果如圖所示：
從上面的**，我們可以知道a,b,c的寬度分別為50+7*2=64px，三者加起來即192px，所以剩下的240-192=48px才是父元素的剩餘空間，於是a,b,c按照設定的1:1:2來分配這48px，a分得12px，b分得12px，c分得24px，所以最終a=64+12=76px，b=64+12=76px，c=64+24=88px由上面的**引入了乙個思考，如果我沒有給
li設定寬度，並且當子元素的內容過多，會出現什麼問題，那就是設定的box-flex會被撐開，根據上面來寫個例子，如下：
css**：
#box#box li#box li:nth-child(1)#box li:nth-child(2)#box li:nth-child(3)html**：
<結果如圖所示：ul id
="box"
>
<
li>這個內容過多怎麼辦？有問題沒有？
li>
<
li>b
li>
<
li>c
li>
ul>
那要怎麼解決呢？
就是給li新增乙個width:1%,**如下：
#box li或者
width:1px也是可以的。結果如圖所示:
相容性如圖所示：
最後說明下：
display:box,是2009的flexbox版本
display:flexbox,或者函式flex()，是2023年發布的
display:flex,是目前正在使用的2023年發布的標準
CSS3布局之box flex的使用
語法 box flex 其中number取值 使用浮點數指定物件所分配其父元素剩餘空間的比例。設定或檢索伸縮盒物件的子元素如何分配其剩餘空間。伸縮盒最老版本 html ul id box li a li li b li li c li ul css box box li nth child 1 bo...
CSS3彈性盒模型之box flex
對於之前講過的box sizing屬性，對於頁面布局很有用，但是突然發現它依然存在一些問題，前面例子中不會存在問題，不代表它沒有問題。如果元素的個數整除100 的時候呢，比較3個元素，那麼第乙個盒子的寬度就會是33.3333333 很顯然，無論如何都是除不盡的，也就是說不可能平均分配。這顯然是不完美...
css3之各種布局
首先，新增的布局屬性需要新增各瀏覽器的私有字首。moz,webidt,ms,o 1，多列布局 cloumns cloumns 200px 3 200px 定義多列中每列的寬度 3 定義多列中的列數 相當於 cloumns width 200px cloumns count 3 如果要調整列與列直接的...