multi-line-wrap-with-row-reverse-ref.html (1230B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test Reference: flex container multiline wrapping 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 .test { 9 width: 300px; 10 } 11 12 p { 13 margin-right: 10px; 14 background: #ccc; 15 } 16 17 #row1-col1 { 18 width: 90px; 19 float: left; 20 } 21 22 #row1-col2 { 23 width: 90px; 24 float: left; 25 } 26 27 #row1-col3 { 28 width: 90px; 29 float: left; 30 } 31 32 #row2-col1 { 33 width: 140px; 34 float: left; 35 } 36 37 #row2-col2 { 38 width: 140px; 39 float: left; 40 } 41 42 #row3-col1 { 43 width: 290px; 44 float: left; 45 } 46 47 .clear { 48 clear: both; 49 } 50 51 </style> 52 </head> 53 <body> 54 <div class="test"> 55 <p id="row1-col1">1-1</p> 56 <p id="row1-col2">1-2</p> 57 <p id="row1-col3">1-3</p> 58 </div> 59 <div class="clear"></div> 60 <div class="test"> 61 <p id="row2-col1">2-1</p> 62 <p id="row2-col2">2-2</p> 63 </div> 64 <div class="clear"></div> 65 <div class="test"> 66 <p id="row3-col1">3-1</p> 67 </div> 68 <div class="clear"></div> 69 </body> 70 </html>