multiline-reverse-wrap-baseline.html (1629B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: multiline reverse wrap baseline.</title> 4 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> 5 <link rel="match" href="reference/multiline-reverse-wrap-baseline-ref.html"> 6 <meta name="assert" content="This test ensures that 'flex-wrap: wrap-reverse' flips the cross axis directions and items with baseline alignment are aligned to cross axis start."/> 7 <style> 8 .flexbox { 9 width: 200px; 10 display: flex; 11 background-color: #aaa; 12 position: relative; 13 flex-wrap: wrap-reverse; 14 align-items: baseline; 15 margin-bottom: 10px; 16 } 17 .flexbox > div { 18 border: 0; 19 } 20 21 .flexbox :nth-child(1) { 22 background-color: lightblue; 23 } 24 .flexbox :nth-child(2) { 25 background-color: lightgreen; 26 } 27 .flexbox :nth-child(3) { 28 background-color: pink; 29 } 30 .flexbox :nth-child(4) { 31 background-color: yellow; 32 } 33 </style> 34 <body> 35 36 <div class="flexbox"> 37 <div style="flex: 1 0 100px;">first<br>first<br>first</div> 38 <div style="flex: 1 0 100px;">second</div> 39 <div style="flex: 1 0 100px; margin-top: 5px">third</div> 40 <div style="flex: 1 0 100px;">fourth<br>fourth</div> 41 </div> 42 43 <div class="flexbox"> 44 <div style="flex: 1 0 100px;">first<br>first<br>first</div> 45 <div style="flex: 1 0 100px;">second</div> 46 <div style="flex: 1 0 100px;">third</div> 47 <div style="flex: 1 0 100px; margin-bottom: 5px">fourth<br>fourth</div> 48 </div> 49 50 <div class="flexbox" style="width: 300px;"> 51 <div style="flex: 1 0 100px; align-self: flex-start; height: 100px">first</div> 52 <div style="flex: 1 0 100px;">second</div> 53 <div style="flex: 1 0 100px;">third<br>third</div> 54 </div> 55 56 </body> 57 </html>