56 lines
1.1 KiB
HTML
56 lines
1.1 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
display: -moz-box;
|
|
display: -webkit-box;
|
|
display: box;
|
|
}
|
|
|
|
div.strut {
|
|
border: 2px solid green;
|
|
margin: 2px;
|
|
}
|
|
|
|
div.flex {
|
|
-moz-box-flex: 1;
|
|
-webkit-box-flex: 1;
|
|
box-flex: 1;
|
|
border: 2px solid purple;
|
|
margin: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>You should see a black box below that is the width of the content area. It contains alternating struts
|
|
and springs. The struts are bordered in green and are inflexible. The springs are bordered in purple
|
|
and should grow and shrink as you resize your browser window. The black box should get taller when
|
|
you make your window wider and get shorter when you shrink your browser window.
|
|
</p>
|
|
|
|
<div style="padding:2px; border:2px solid black">
|
|
<div class="strut">
|
|
Fixed
|
|
</div>
|
|
<div class="flex">
|
|
This is a flexible block, and it will shrink or grow as needed.
|
|
</div>
|
|
<div class="strut">
|
|
Fixed
|
|
</div>
|
|
<div class="flex">
|
|
This is a flexible block, and it will shrink or grow as needed.
|
|
</div>
|
|
<div class="strut">
|
|
Fixed
|
|
</div>
|
|
<div class="flex">
|
|
This is a flexible block, and it will shrink or grow as needed.
|
|
</div>
|
|
<div class="strut">
|
|
Fixed
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|