css-flexbox-img-expand-evenly.html (1271B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox Test: Image Expansion</title> 5 <link rel="author" title="Eiji Kitamura" href="mailto:agektmr@gmail.com"> 6 <!-- You must have at least one spec link, but may have as many as are covered in the test. --> 7 <!-- Be sure to make the main testing area first in the order --> 8 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property"> 9 <!-- The match link is only required if this is a reftest --> 10 <link rel="match" href="reference/css-flexbox-img-expand-evenly-ref.html"> 11 <meta name="assert" content="3 rectangular images fill out border."> 12 <style type="text/css"> 13 14 /* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */ 15 div.flexbox { 16 height: 50px; 17 width: 300px; 18 border: 2px dotted black; 19 display: flex; 20 } 21 img { 22 width: 48px; 23 flex-grow: 1; 24 background: purple; 25 border: 1px solid white; 26 } 27 28 </style> 29 </head> 30 <body> 31 <p>3 rectangular images fill out border.</p> 32 33 <!-- PAGE CONTENT --> 34 <div class="flexbox"> 35 <img src="support/solidblue.png" /> 36 <img src="support/solidblue.png" /> 37 <img src="support/solidblue.png" /> 38 </div> 39 40 </body> 41 </html>