| <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> |
| |
| |
