| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>CSS Flexible Box Test: align-content property - flex-start</title> | |
| <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com"> | |
| <style type="text/css"> | |
| .container { | |
| position: relative; | |
| height: 14em; | |
| width: 20em; | |
| background: red; | |
| margin: 1em; | |
| border: 1px solid black; | |
| } | |
| span { | |
| height: 2em; | |
| display: inline-block; | |
| background: green; | |
| color: white; | |
| margin: 1em; | |
| width: 8em; | |
| float: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p> | |
| <div class="container"> | |
| <span>first</span> | |
| <span>second</span> | |
| <span>third</span> | |
| <span>forth</span> | |
| </div> | |
| </body> | |
| </html> |