flexbox_justifycontent-right-002.html (1148B)
1 <!DOCTYPE html> 2 <title>flexbox | justify-content: right 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-right-002-ref.html"> 6 <style> 7 div { 8 background: blue; 9 margin: 1em 0; 10 width: 12em; 11 height: 10em; 12 display: flex; 13 justify-content: right; 14 } 15 div#column { 16 flex-direction: column; 17 } 18 div#column-reverse { 19 flex-direction: column-reverse; 20 } 21 span { 22 background: white; 23 padding: 0 2em; 24 width: 4em; 25 height: 2em; 26 } 27 span:nth-child(1) {background: yellow;} 28 span:nth-child(2) {background: pink;} 29 span:nth-child(3) {background: lightblue;} 30 </style> 31 32 <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> 33 34 <div id="column"> 35 <span>one</span> 36 <span>two</span> 37 <span>three</span> 38 </div> 39 40 <div id="column-reverse"> 41 <span>one</span> 42 <span>two</span> 43 <span>three</span> 44 </div>