flexbox_justifycontent-left-002.html (1146B)
1 <!DOCTYPE html> 2 <title>flexbox | justify-content: left in columns</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-002-ref.html"> 6 <style> 7 div { 8 background: blue; 9 margin: 1em 0; 10 display: flex; 11 width: 12em; 12 height: 10em; 13 justify-content: left; 14 } 15 div#column { 16 flex-direction: column; 17 } 18 div#column-reverse { 19 flex-direction: column-reverse; 20 } 21 22 span { 23 background: white; 24 padding: 0 2em; 25 width: 4em; 26 height: 2em; 27 } 28 span:nth-child(1) {background: yellow;} 29 span:nth-child(2) {background: pink;} 30 span:nth-child(3) {background: lightblue;} 31 </style> 32 33 <p>Test passes if the numbered boxes are placed in the top left corner of the first flex container and top-to-bottom order is 1, 2, 3, and placed in the top left corner of the second flexbox container and top-to-bottom order is 3, 2, 1.</p> 34 35 <div id="column"> 36 <span>one</span> 37 <span>two</span> 38 <span>three</span> 39 </div> 40 41 <div id="column-reverse"> 42 <span>one</span> 43 <span>two</span> 44 <span>three</span> 45 </div>