css3中box-flex的使用_html/css_WEB-ITnose
Jun 24, 2016 am 11:36 AM
语法:
box-flex:<number>
其中number取值:使用浮点数指定对象所分配其父元素剩余空间的比例。
设置或检索伸缩盒对象的子元素如何分配其剩余空间。
html代码:
<ul id="box"> <li>a</li> <li>b</li> <li>c</li></ul>
css代码:
#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-box}#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
误区:注意box-flex只是动态分配父元素的剩余空间,而不是整个父元素的空间。如上例,父元素#box的宽度为240px,如果你认为a,b,c的宽度分别为60, 60, 120那么就错了,因为box-flex只是分配父元素的剩余空间而已,所以a,b,c所分到的应该是除内容外所剩余下来的宽度
为了清晰所谓的剩余空间分配,对上例稍作修改,HTML Code不变
css代码:
#box{display:-webkit-box;display:-moz-box;display:-ms-box;background:#000;width:240px;height:100px;margin:0;padding:10px;list-style:none;vertical-align:top;}.box li{width:50px;padding:7px;}#box li:nth-child(1){-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;background:#666;}#box li:nth-child(2){-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;background:#999;}#box li:nth-child(3){-webkit-box-flex:2;-moz-box-flex:2;-ms-box-flex:2;background:#ccc;}
从上面的代码,我们可以知道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
兼容性如图所示:

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?

Was sind die Sicherheitsauswirkungen der Verwendung von IFRames und wie kann ich sie mildern?

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?

Wie benutze ich den HTML5 & lt; Meter & gt; Element zur Anzeige numerischer Daten innerhalb eines Bereichs?
