| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Flexbox Test: Image Expansion</title> |
| <link rel="author" title="Eiji Kitamura" href="mailto:agektmr@gmail.com"> |
| <!-- You must have at least one spec link, but may have as many as are covered in the test. --> |
| <!-- Be sure to make the main testing area first in the order --> |
| <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> |
| <!-- The match link is only required if this is a reftest --> |
| <link rel="match" href="reference/css-flexbox-img-expand-evenly-ref.html"> |
| <meta name="flags" content=""> |
| <meta name="assert" content="3 rectangular images fill out border."> |
| <style type="text/css"> |
| |
| /* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */ |
| div.flexbox { |
| height: 50px; |
| width: 300px; |
| border: 2px dotted black; |
| display: flex; |
| } |
| img { |
| width: 48px; |
| flex-grow: 1; |
| background: purple; |
| border: 1px solid white; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <p>3 rectangular images fill out border.</p> |
| |
| <!-- PAGE CONTENT --> |
| <div class="flexbox"> |
| <img src="support/solidblue.png" /> |
| <img src="support/solidblue.png" /> |
| <img src="support/solidblue.png" /> |
| </div> |
| |
| </body> |
| </html> |
