flexbox-flex-wrap-horiz-002-ref.html (1630B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Reftest Reference</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <meta charset="utf-8"> 11 <style> 12 div.flexbox { 13 border: 1px dashed black; 14 min-width: 100px; 15 height: 12px; 16 float: left; 17 clear: both; 18 margin-bottom: 2px; 19 } 20 div.smallItem { 21 width: 30px; 22 border: 1px solid blue; 23 background: lightblue; 24 float: left; 25 } 26 div.fullCrossSize { 27 height: 10px; 28 } 29 div.halfCrossSize { 30 height: 4px; 31 } 32 </style> 33 </head> 34 <body> 35 36 <!-- No flex items --> 37 <div class="flexbox"> 38 </div> 39 40 <!-- Single small flex item --> 41 <div class="flexbox"> 42 <div class="smallItem fullCrossSize"></div> 43 </div> 44 45 <!-- Multiple flex items, larger than flex container's min-size: --> 46 <div class="flexbox"> 47 <div class="smallItem fullCrossSize"></div> 48 <div class="smallItem fullCrossSize"></div> 49 <div class="smallItem fullCrossSize"></div> 50 <div class="smallItem fullCrossSize"></div> 51 <div class="smallItem fullCrossSize"></div> 52 </div> 53 54 <!--- ...and now with flex container constrained by both min and max-size --> 55 <div class="flexbox" style="max-width: 120px"> 56 <div class="smallItem halfCrossSize"></div> 57 <div class="smallItem halfCrossSize"></div> 58 <div class="smallItem halfCrossSize"></div> 59 <div class="smallItem halfCrossSize"></div> 60 <div class="smallItem halfCrossSize"></div> 61 </div> 62 63 </body> 64 </html>