| <!DOCTYPE html> |
| <!-- |
| | Combined tests for basic functionality of CSS Flexible Box Layout Module. |
| | https://www.w3.org/TR/css-flexbox-1 |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| background-color: #808080; |
| font-size: 12px; |
| } |
| .sized { |
| width: 250px; |
| height: 250px; |
| } |
| .vsized { |
| height: 40px; |
| } |
| .small { |
| width: 100px; |
| min-height: 40px; |
| } |
| .flex { |
| display:flex; |
| color: #99b9f3; |
| background-color: #ffee00; |
| opacity: 0.75; |
| } |
| .inlineflex { |
| display:inline-flex; |
| color: #99b9f3; |
| background-color: #ffee08; |
| opacity: 0.75; |
| } |
| .container { |
| overflow: hidden; |
| flex-flow: row wrap; |
| justify-content: space-around; |
| align-items: center; |
| align-content: flex-end; #space-between; |
| min-width: 2px; |
| padding: 2px; |
| border: 4px solid #000060; |
| outline: 2px solid #00f000; |
| margin: 6px; |
| -no-min-width: 350px; |
| -no-max-width: 100px; |
| } |
| .item { |
| flex: 1 1 100px; |
| background-color: #0047ab; /* blue */ |
| margin: 2px; |
| order: 0; |
| } |
| .green { |
| background-color: #007700; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="sized flex container" style="align-content: stretch;"> |
| <span class="item" style="order: 9999">0<div class="small">zz</div><div class="small green">fooA fooB fooC fooD</div></span> |
| <span class="item" style="flex-grow: 0; flex-basis: auto; max-height: 5%;">1</span> |
| <span class="item" style="max-height: 10px;">**2**</span> |
| <span class="item" style="flex-grow: 20">3</span> |
| <span class="item" style="">4</span> |
| <span class="item" style="">5</span> |
| <span class="item" style="order: -1">6</span> |
| <span class="item" style="">7</span> |
| <span class="item" style="max-width: 30%">8</span> |
| <span class="item" style="">9</span> |
| <span class="item" style="order:9999;">X<div class="green">fooA fooB fooC fooD fooE fooF</div>barY barZ</span> |
| <span class="item" style="order:9999;">foo1 foo2 foo3 foo4 foo5 foo6 foo7 foo8 foo9 foo10 foo11 foo12</span> |
| </div> |
| </body> |
| </html> |
