align-content-wrap-005.html (1750B)
1 <!doctype html> 2 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" /> 4 <link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values" /> 5 <meta name="assert" content="Flex items are positioned correctly in wrap-reverse align-content:start/end containers in either text direction."> 6 7 <style> 8 .flexbox { 9 display: flex; 10 width: 75px; /* make the row flexbox wrap */ 11 height: 150px; 12 flex-wrap: wrap-reverse; 13 position: relative; 14 float: left; 15 margin-right: 20px; 16 border: 1px solid black; 17 } 18 19 .flexitem { 20 width: 50px; 21 height: 50px; 22 } 23 24 .flexbox :nth-child(1) { 25 background-color: blue; 26 } 27 .flexbox :nth-child(2) { 28 background-color: orange; 29 } 30 </style> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/resources/check-layout-th.js"></script> 34 <body onload="checkLayout('.flexitem')"> 35 36 <div class=flexbox style="align-content: start;"> 37 <div class=flexitem data-offset-x=0 data-offset-y=50></div> 38 <div class=flexitem data-offset-x=0 data-offset-y=0></div> 39 </div> 40 41 <div class=flexbox style="align-content: end;"> 42 <div class=flexitem data-offset-x=0 data-offset-y=100></div> 43 <div class=flexitem data-offset-x=0 data-offset-y=50></div> 44 </div> 45 46 <div class=flexbox style="align-content: start; direction: rtl;"> 47 <div class=flexitem data-offset-x=25 data-offset-y=50></div> 48 <div class=flexitem data-offset-x=25 data-offset-y=0></div> 49 </div> 50 51 <div class=flexbox style="align-content: end; direction: rtl"> 52 <div class=flexitem data-offset-x=25 data-offset-y=100></div> 53 <div class=flexitem data-offset-x=25 data-offset-y=50></div> 54 </div>