<!DOCTYPE html >
<!--
Any copyright is dedicated to the Public Domain .
http : / / creativecommons . org / publicdomain / zero / 1 . 0 /
-->
<html >
<head >
<title >
CSS Test: "-webkit-box-flex" in a "display: -webkit-box" container
</title >
<style >
.box {
display: -webkit-box;
border: 1 px solid black;
margin: 5 px 20 px;
width: 100 px;
float: left; /* For testing in "rows" */
font : 10 px serif;
}
.box > *:nth-child(1 ) { background: turquoise; }
.box > *:nth-child(2 ) { background: salmon; }
.box > *:nth-child(3 ) { background: yellow; }
.huge { width: 120 px }
.bf1 { -webkit-box-flex: 1 }
.bf3 { -webkit-box-flex: 3 }
br { clear: both; }
</style >
</head >
<body >
<!-- FIRST ROW: Default -webkit-box-flex -->
<div class="box" >
<div >a </div >
</div >
<div class="box" >
<div >a </div ><div >b </div >
</div >
<div class="box" >
<div class="huge" >a </div >
</div >
<br >
<!-- SECOND ROW: One item has nonzero -webkit-box-flex -->
<div class="box" >
<div class="bf1" >a </div >
</div >
<div class="box" >
<div >a </div ><div class="bf1" >b </div >
</div >
<div class="box" >
<div class="huge bf1" >a </div >
</div >
<br >
<!-- THIRD ROW: Two items have nonzero (equal) -webkit-box-flex -->
<div class="box" >
<div class="bf1" >a </div ><div class="bf1" >b </div >
</div >
<div class="box" >
<div class="bf1" >a </div ><div >b </div ><div class="bf1" >c</div >
</div >
<div class="box" >
<div class="huge bf1" >a </div >
<div >b </div >
<div class="huge bf1" >c</div >
</div >
<br >
<!-- FOURTH ROW: Non-equal nonzero -webkit-box-flex values -->
<div class="box" >
<div class="bf1" >a </div ><div class="bf3" >b </div >
</div >
<div class="box" >
<div class="bf3" >a </div ><div class="bf1" >b </div >
</div >
<div class="box" >
<div class="huge bf1" >a </div >
<div class="huge bf3" >b </div >
</div >
</body >
</html >
Messung V0.5 in Prozent C=97 H=96 G=96
¤ Dauer der Verarbeitung: 0.4 Sekunden
¤
*© Formatika GbR, Deutschland