flexbox_justifycontent-right-002-ref.html (1002B)
1 <!DOCTYPE html> 2 <title>flexbox | justify-content: right in columns | reference</title> 3 <link rel="author" title="Eric Meyer" href="mailto:emeyer@igalia.com"> 4 <style> 5 div { 6 background: blue; 7 margin: 1em 0; 8 width: 12em; 9 height: 10em; 10 } 11 span { 12 display: block; 13 background: white; 14 padding: 0 2em; 15 width: 4em; 16 height: 2em; 17 } 18 span:nth-child(1) {background: yellow;} 19 span:nth-child(2) {background: pink;} 20 span:nth-child(3) {background: lightblue;} 21 #column-reverse span:nth-child(3) {background: yellow;} 22 #column-reverse span:nth-child(1) {background: lightblue;} 23 </style> 24 25 <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> 26 27 <div id="column"> 28 <span>one</span> 29 <span>two</span> 30 <span>three</span> 31 </div> 32 33 <div id="column-reverse"> 34 <span>three</span> 35 <span>two</span> 36 <span>one</span> 37 </div>