justify-content_space-between-001.html (1413B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexible Box Test: justify-content_space-between</title> 5 <link rel="author" title="Intel" href="http://www.intel.com" /> 6 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property" /> 7 <meta name="assert" content="Check if the web engine can indentify the justify-content value space-between." /> 8 <style> 9 #test01, #test02, #test03{ 10 text-align:center; 11 font-size: 20px; 12 width: 30px; 13 } 14 #test01{ 15 background: #7FFF00; 16 } 17 #test02{ 18 background: #00FFFF; 19 } 20 #test03{ 21 background: #4169E1; 22 } 23 #test{ 24 background: #ff0000; 25 height: 200px; 26 width: 200px; 27 display: flex; 28 justify-content: space-between; 29 } 30 </style> 31 </head> 32 <body> 33 <p>Test passes if:<br> 34 1. the rectangle 1, 2, 3 show up in a row in a red rectangle.<br> 35 2. No gap between the left edge of red rectangle and the left of rectangle 1, no gap between the right edge of red rectangle and the right of rectangle 3 too, and rectangle 2 is distributed so that the empty space between rectangle 1 and rectangle 3 is the same.<br> 36 3. the height of the 1, 2, 3 is the same as the height of the red rectangle.</p> 37 <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div> 38 </body> 39 </html>