flexbox_justifycontent-right-001-ref.html (1002B)
1 <!DOCTYPE html> 2 <title>flexbox | justify-content: right in rows | 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 height: 4em; 9 width: 40em; 10 } 11 span { 12 display: inline-block; 13 background: white; 14 padding: 0 2em; 15 width: 4em; 16 height: 2em; 17 } 18 span:nth-child(1) {background: yellow; margin-left: 16em;} 19 span:nth-child(2) {background: pink;} 20 span:nth-child(3) {background: lightblue;} 21 #row-reverse span:nth-child(3) {background: yellow;} 22 #row-reverse span:nth-child(1) {background: lightblue;} 23 </style> 24 25 <p>Test passes if the numbered boxes are placed in the top right corner of the first flex container and left-to-right order is 1, 2, 3, and placed in the top right corner of the second flexbox container and left-to-right order is 3, 2, 1.</p> 26 27 <div id="row"> 28 <span>one</span><span>two</span><span>three</span> 29 </div> 30 31 <div id="row-reverse"> 32 <span>three</span><span>two</span><span>one</span> 33 </div>