| <!DOCTYPE html> |
| <!-- |
| | Combined tests for basic functionality of CSS Flexible Box Layout Module. |
| | https://www.w3.org/TR/css-flexbox-1 |
| | This test focuses on shrinking flex items and justify-content values. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| background-color: #808080; |
| font-size: 12px; |
| } |
| .inlineflex { |
| display: inline-flex; |
| color: #99b9f3; |
| background-color: #ffee08; |
| opacity: 0.75; |
| } |
| .flex { |
| display: flex; |
| color: #99b9f3; |
| background-color: #ffee08; |
| opacity: 0.75; |
| } |
| |
| .widesized { |
| width: 100px; |
| height: 10px; |
| -no-margin-left: auto; |
| } |
| .sized { |
| width: 50px; |
| height: 10px; |
| } |
| .container { |
| flex-flow: row nowrap; |
| padding: 1px; |
| border: 1px solid #000060; |
| outline: 1px solid #00f000; |
| margin: 3px; |
| } |
| .flex-end { |
| justify-content: flex-end; |
| align-items: center; |
| align-content: center; |
| } |
| .center { |
| justify-content: center; |
| align-items: center; |
| align-content: center; |
| } |
| .space-between { |
| justify-content: space-between; |
| align-items: center; |
| align-content: center; |
| } |
| .center { |
| justify-content: center; |
| align-items: center; |
| align-content: center; |
| } |
| .space-around { |
| justify-content: space-around; |
| align-items: center; |
| align-content: center; |
| } |
| .blue { |
| background-color: #0047ab; |
| } |
| .red { |
| background-color: red; |
| } |
| .hidden { |
| overflow: hidden; |
| } |
| .visible { |
| overflow: visible; |
| } |
| .shrink-1 { |
| flex-shrink: 1; |
| } |
| .shrink-0-5 { |
| flex-shrink: 0.5; |
| } |
| .shrink-0-25 { |
| flex-shrink: 0.25; |
| } |
| .basis-0 { |
| flex-basis: 0; |
| } |
| .basis-big { |
| flex-basis: 100px; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div style="display:inline-block; margin: 0 5px 0 40px; width: 50px;"> |
| |
| <div class="sized flex flex-end container"> |
| <div class="blue widesized shrink-1"></div> |
| </div> |
| |
| <div class="sized flex flex-end container"> |
| <div class="red widesized shrink-1"></div> |
| <div class="blue widesized shrink-0-5"></div> |
| </div> |
| |
| <div class="sized flex flex-end container"> |
| <div class="red widesized shrink-1"></div> |
| <div class="blue widesized shrink-1"></div> |
| </div> |
| |
| <div class="sized flex flex-end container"> |
| <div class="blue widesized shrink-0-5"></div> |
| </div> |
| |
| <div class="sized flex flex-end container"> |
| <div class="red widesized shrink-0-5"></div> |
| <div class="blue widesized shrink-0-25"></div> |
| </div> |
| |
| <div class="sized flex flex-end container"> |
| <div class="red widesized shrink-0-5 basis-big"></div> |
| <div class="blue widesized shrink-0-25 basis-big"></div> |
| </div> |
| |
| flex-end |
| </div> |
| <div style="display:inline-block; margin: 0 55px 0 0; width: 50px;"> |
| |
| <div class="sized flex container"> |
| <div class="blue widesized shrink-1"></div> |
| </div> |
| |
| <div class="sized flex container"> |
| <div class="red widesized shrink-1"></div> |
| <div class="blue widesized shrink-0-5"></div> |
| </div> |
| |
| <div class="sized flex container"> |
| <div class="red widesized shrink-1"></div> |
| <div class="blue widesized shrink-1"></div> |
| </div> |
| |
| <div class="sized flex container"> |
| <div class="blue widesized shrink-0-5"></div> |
| </div> |
| |
| <div class="sized flex container"> |
| <div class="red widesized shrink-0-5"></div> |
| <div class="blue widesized shrink-0-25"></div> |
| </div> |
| |
| <div class="sized flex container"> |
| <div class="red widesized shrink-0-5 basis-big"></div> |
| <div class="blue widesized shrink-0-25 basis-big"></div> |
| </div> |
| |
| flex-start |
| </div> |
| <div style="display:inline-block; margin: 0 0 0 5px; width: 75px;"> |
| |
| |
| <div class="sized flex space-around container"> |
| <div class="blue widesized shrink-1"></div> |
| </div> |
| |
| <div class="sized flex space-around container"> |
| <div class="red widesized shrink-1"></div> |
| <div class="blue widesized shrink-0-5"></div> |
| </div> |
| |
| <div class="sized flex space-around container"> |
| <div class="red widesized shrink-1"></div> |
| <div class="blue widesized shrink-1"></div> |
| </div> |
| |
| <div class="sized flex space-around container"> |
| <div class="blue widesized shrink-0-5"></div> |
| </div> |
| |
| <div class="sized flex space-around container"> |
| <div class="red widesized shrink-0-5"></div> |
| <div class="blue widesized shrink-0-25"></div> |
| </div> |
| |
| <div class="sized flex space-around container"> |
| <div class="red widesized shrink-0-5 basis-big"></div> |
| <div class="blue widesized shrink-0-25 basis-big"></div> |
| </div> |
| |
| |
| space-around |
| </div> |
| <div style="display:inline-block; margin: 0 0 0 15px; width: 75px;"> |
| |
| |
| <div class="sized flex center container"> |
| <div class="blue widesized shrink-1"></div> |
| </div> |
| |
| <div class="sized flex center container"> |
| <div class="red widesized shrink-1"></div> |
| <div class="blue widesized shrink-0-5"></div> |
| </div> |
| |
| <div class="sized flex center container"> |
| <div class="red widesized shrink-1"></div> |
| <div class="blue widesized shrink-1"></div> |
| </div> |
| |
| <div class="sized flex center container"> |
| <div class="blue widesized shrink-0-5"></div> |
| </div> |
| |
| <div class="sized flex center container"> |
| <div class="red widesized shrink-0-5"></div> |
| <div class="blue widesized shrink-0-25"></div> |
| </div> |
| |
| <div class="sized flex center container"> |
| <div class="red widesized shrink-0-5 basis-big"></div> |
| <div class="blue widesized shrink-0-25 basis-big"></div> |
| </div> |
| |
| |
| center |
| </div> |
| <div style="display:inline-block; margin: 0 0 0 5px; width: 90px;"> |
| |
| |
| |
| <div class="sized flex space-between container"> |
| <div class="blue widesized shrink-1"></div> |
| </div> |
| |
| <div class="sized flex space-between container"> |
| <div class="red widesized shrink-1"></div> |
| <div class="blue widesized shrink-0-5"></div> |
| </div> |
| |
| <div class="sized flex space-between container"> |
| <div class="red widesized shrink-1"></div> |
| <div class="blue widesized shrink-1"></div> |
| </div> |
| |
| <div class="sized flex space-between container"> |
| <div class="blue widesized shrink-0-5"></div> |
| </div> |
| |
| <div class="sized flex space-between container"> |
| <div class="red widesized shrink-0-5"></div> |
| <div class="blue widesized shrink-0-25"></div> |
| </div> |
| |
| <div class="sized flex space-between container"> |
| <div class="red widesized shrink-0-5 basis-big"></div> |
| <div class="blue widesized shrink-0-25 basis-big"></div> |
| </div> |
| |
| |
| space-between |
| </div> |
| |
| </body> |
| </html> |
| |