multi-line-wrap-reverse-row-reverse-ref.html (1321B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test Reference: flex container multiline wrapping-reverse in row-reverse direction</title> 5 <link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com"> 6 <link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com"> 7 <style> 8 * { margin:0; padding:0; font-size:100%; line-height:1; } 9 10 .test { 11 width: 300px; 12 } 13 14 p { 15 margin-top: 10px; 16 margin-right: 10px; 17 background: #ccc; 18 } 19 20 #row1-col1 { 21 width: 90px; 22 float: left; 23 } 24 25 #row1-col2 { 26 width: 90px; 27 float: left; 28 } 29 30 #row1-col3 { 31 width: 90px; 32 float: left; 33 } 34 35 #row2-col1 { 36 width: 140px; 37 float: left; 38 } 39 40 #row2-col2 { 41 width: 140px; 42 float: left; 43 } 44 45 #row3-col1 { 46 width: 290px; 47 float: left; 48 } 49 50 .clear { 51 clear: both; 52 } 53 54 </style> 55 </head> 56 <body> 57 <div class="test"> 58 <p id="row1-col1">1-1</p> 59 <p id="row1-col2">1-2</p> 60 <p id="row1-col3">1-3</p> 61 </div> 62 <div class="clear"></div> 63 <div class="test"> 64 <p id="row2-col1">2-1</p> 65 <p id="row2-col2">2-2</p> 66 </div> 67 <div class="clear"></div> 68 <div class="test"> 69 <p id="row3-col1">3-1</p> 70 </div> 71 <div class="clear"></div> 72 </body> 73 </html>