| <!DOCTYPE html> |
| <!-- |
| | Combined tests for basic functionality of CSS Flexible Box Layout Module. |
| | https://www.w3.org/TR/css-flexbox-1 |
| | This test also shows some differences with Chrome due to missing |
| | implementation of content-based minimum size. |
| --> |
| <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: 2px solid #000060; |
| outline: 2px solid #00f000; |
| margin: 6px; |
| } |
| .item { |
| flex: 1 1 100px; |
| background-color: #0047ab; /* blue */ |
| margin: 2px; |
| order: 0; |
| } |
| .blue { |
| background-color: #0047ab; |
| } |
| .green { |
| background-color: #007700; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <span> |
| <div style="display: inline-block; width: 300px"> |
| <div class="sized flex container" style="height: 10px; min-height: 120px; background-color: #404040; align-content: stretch;"> |
| <div style="display: inline-block; background-color: #ffffff; height: auto; align-self:stretch;">xx</div> |
| <div style="display: inline-block; background-color: #ffffff; height: auto; margin-top: auto;">xx</div> |
| <div style="display: inline-block; background-color: #ffffff; height: auto; margin-bottom: auto;">xx</div> |
| <div style="display: inline-block; background-color: #ffffff; height: auto; margin: auto;">xx</div> |
| <span class="item" style="flex: 0 1 50px;">0</span> |
| <span class="item" style="flex: 0 1 50px;">1</span> |
| <span class="item" style="flex: 0 1 50px;">2</span> |
| <span class="item" style="flex: 0 1 50px;">3</span> |
| <span class="item" style="flex: 0 1 50px;">4</span> |
| <span class="item" style="flex: 0 1 50px;">5</span> |
| <span class="item" style="flex: 0 1 200px;">6</span> |
| </div> |
| |
| <div class="small flex container" style="height:41px;"> |
| <span class="blue" style="margin: 0px; flex-basis: 20%;">a</span> |
| </div> |
| <div class="flex container"> |
| <span class="blue" style="flex-basis: 10%;">AA</span> |
| </div> |
| <div class="flex container"> |
| <span class="blue" style="margin:3px;">SSS1a</span> |
| <span class="blue">SSS1b</span> |
| </div> |
| <div class="flex container green"> |
| <div class="flex container"> |
| <span class="blue" style="margin:3px;">DDD1a</span> |
| <span class="blue">DDD1b</span> |
| </div> |
| </div> |
| </div> |
| </span> |
| |
| <span> |
| <div style="display: inline-block; width: 300px"> |
| <div class="flex container green"> |
| <div class="flex container" style="flex-basis: 75%"> |
| <span class="blue">DDD2</span> |
| </div> |
| </div> |
| |
| <div class="flex container green"> |
| <div class="flex container"> |
| <span class="blue" style="flex-basis: 6%;">DDbwa</span> |
| </div> |
| </div> |
| <div class="flex container green"> |
| <div class="flex container"> |
| <span class="blue" style="width: 6%;">DDbwb</span> |
| </div> |
| </div> |
| <div class="flex container"> |
| <span class="blue" style="flex-basis: 6%;">SSbwa</span> |
| </div> |
| <div class="flex container"> |
| <span class="blue" style="width: 6%;">SSbwb</span> |
| </div> |
| |
| <div class="flex container green"> |
| <div class="flex container" style="width:1280px;"> |
| <span class="blue" style="flex-basis: 1%;">DDD3bwa</span> |
| </div> |
| </div> |
| <div class="flex container green"> |
| <div class="flex container" style="width:1280px;"> |
| <span class="blue" style="width: 1%;">DDD3bwb</span> |
| </div> |
| </div> |
| </div> |
| </span> |
| |
| </body> |
| </html> |
| |
