足球护具有哪些_布鲁特_310竞彩足球推荐专家预测_-90vs即时比分 - nba得分榜历史排名

box-flex

語法：

box-flex：<number>

默認(rèn)值：0

適用于：伸縮盒子元素

繼承性：無

動(dòng)畫性：否

計(jì)算值：指定值

取值：

<number>：
使用浮點(diǎn)數(shù)指定對(duì)象所分配其父元素剩余空間的比例。

說明：

設(shè)置或檢索伸縮盒對(duì)象的子元素如何分配其剩余空間。
  • 效果類似于過渡版本和新版本的flex屬性；
  • 示例：將一個(gè)容器分成6份，子對(duì)象a分1份，b分2份，c分3份

    HTML Code：

    <ul id="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

    CSS Code：

    #box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}
#box li:nth-child(1){box-flex:1;}
#box li:nth-child(2){box-flex:1;}
#box li:nth-child(3){box-flex:2;}

    上面代碼請自行加上-moz-,-webkit-之類的。box-flex生效需定義其父元素display為box或inline-box

  • 誤區(qū)：注意box-flex只是動(dòng)態(tài)分配父元素的剩余空間，而不是整個(gè)父元素的空間。如上例，父元素#box的寬度為240px，如果你認(rèn)為a,b,c的寬度分別為60, 60, 120那么就錯(cuò)了，因?yàn)閎ox-flex只是分配父元素的剩余空間而已，所以a,b,c所分到的應(yīng)該是除內(nèi)容外所剩余下來的寬度
  • 為了清晰所謂的剩余空間分配，對(duì)上例稍作修改，HTML Code不變

    CSS Code：

    #box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}
.box li{width:50px;padding:7px;}
#box li:nth-child(1){box-flex:1;}
#box li:nth-child(2){box-flex:1;}
#box li:nth-child(3){box-flex:2;}

    從上面的代碼，我們可以知道a,b,c的寬度分別為50+7*2=64px，三者加起來即192px，所以剩下的240-192=48px才是父元素的剩余空間，于是a,b,c按照設(shè)定的1:1:2來分配這48px，a分得12px，b分得12px，c分得24px，所以最終a=64+12=76px，b=64+12=76px，c=64+24=88px

  • 對(duì)應(yīng)的腳本特性為boxFlex。

兼容性：

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-11.0 2.0-40.0-moz- 4.0-45.0-webkit- 6.0-8.0-webkit- 15.0-29.0-webkit- 6.0-8.3-webkit- 2.1-4.4.4-webkit- 18.0-42.0-webkit-

示例：