<!
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=98 H=100 G=98
¤ Dauer der Verarbeitung: 0.10 Sekunden
(vorverarbeitet am 2026-06-04)
¤ *© Formatika GbR, Deutschland
