| <!DOCTYPE html> |
| <!-- |
| | Combined tests for container auto margins of CSS Flexible Box Layout Module. |
| | https://www.w3.org/TR/css-flexbox-1 |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 65px; |
| font-family: Roboto; |
| background-color: #808080; |
| font-size: 12px; |
| } |
| |
| .main { |
| width: 500px; |
| height: 300px; |
| background-color: #fff; |
| } |
| |
| .absolute { |
| position: absolute; |
| left: 400px; |
| } |
| |
| .outer { |
| width: 100px; |
| height: 50px; |
| background-color: #00f; |
| } |
| |
| .inner { |
| width: 20px; |
| height: 20px; |
| |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background-color: #0f0; |
| } |
| |
| .auto { |
| margin: 0 auto; |
| } |
| .margin { |
| margin: 0 20px; |
| } |
| |
| .column { |
| flex-flow: column wrap; |
| } |
| .row { |
| flex-flow: row wrap; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div class="main"> |
| <div class="outer"> |
| <div class="inner auto column"></div> |
| </div> |
| <span class="outer"> |
| <div class="inner auto column"></div> |
| </span> |
| <div class="outer"> |
| <div class="inner auto row"></div> |
| </div> |
| <span class="outer"> |
| <div class="inner auto row"></div> |
| </span> |
| |
| <div class="outer"> |
| <div class="inner margin column"></div> |
| </div> |
| <span class="outer"> |
| <div class="inner margin column"></div> |
| </span> |
| <div class="outer"> |
| <div class="inner margin row"></div> |
| </div> |
| <span class="outer"> |
| <div class="inner margin row"></div> |
| </span> |
| |
| <div class="outer absolute" style="top: 10px;"> |
| <div class="inner auto column"></div> |
| </div> |
| <div class="outer absolute" style="top: 80px;"> |
| <div class="inner auto row"></div> |
| </div> |
| |
| <div class="outer absolute" style="top: 150px;"> |
| <div class="inner margin column"></div> |
| </div> |
| <div class="outer absolute" style="top: 220px;"> |
| <div class="inner margin row"></div> |
| </div> |
| |
| </div> |
| </body> |
| </html> |
