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