flexbox_justifycontent-left-001.html (1112B)
1 <!DOCTYPE html> 2 <title>flexbox | justify-content: left in rows</title> 3 <link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> 4 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-justify-content"> 5 <link rel="match" href="flexbox_justifycontent-left-001-ref.html"> 6 <style> 7 div { 8 background: blue; 9 margin: 1em 0; 10 display: flex; 11 height: 4em; 12 width: 40em; 13 flex-direction: row; 14 justify-content: left; 15 } 16 div#row-reverse { 17 flex-direction: row-reverse; 18 } 19 20 span { 21 background: white; 22 padding: 0 2em; 23 width: 4em; 24 height: 2em; 25 } 26 span:nth-child(1) {background: yellow;} 27 span:nth-child(2) {background: pink;} 28 span:nth-child(3) {background: lightblue;} 29 </style> 30 31 <p>Test passes if the numbered boxes are placed in the top left corner of the first flex container and left-to-right order is 1, 2, 3, and placed in the top left corner of the second flexbox container and left-to-right order is 3, 2, 1.</p> 32 33 <div id="row"> 34 <span>one</span> 35 <span>two</span> 36 <span>three</span> 37 </div> 38 39 <div id="row-reverse"> 40 <span>one</span> 41 <span>two</span> 42 <span>three</span> 43 </div>