flexbox-flex-wrap-vert-002-ref.html (1558B)
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 width: 12px; 15 min-height: 100px; 16 margin-right: 2px; 17 float: left; 18 } 19 div.smallItem { 20 height: 30px; 21 border: 1px solid blue; 22 background: lightblue; 23 } 24 div.halfCrossSize { 25 width: 4px; 26 } 27 </style> 28 </head> 29 <body> 30 31 <!-- No flex items --> 32 <div class="flexbox"> 33 </div> 34 35 <!-- Single small flex item --> 36 <div class="flexbox"> 37 <div class="smallItem"></div> 38 </div> 39 40 <!-- Multiple flex items, larger than flex container's min-size: --> 41 <div class="flexbox"> 42 <div class="smallItem"></div> 43 <div class="smallItem"></div> 44 <div class="smallItem"></div> 45 <div class="smallItem"></div> 46 <div class="smallItem"></div> 47 </div> 48 49 <!--- ...and now with flex container constrained by both min and max-size --> 50 <div class="flexbox" style="max-height: 120px"> 51 <div class="smallItem halfCrossSize" style="float: left"></div> 52 <div class="smallItem halfCrossSize" style="float: left"></div> 53 <div class="smallItem halfCrossSize" style="float: left"></div> 54 <div class="smallItem halfCrossSize" style="float: left"></div> 55 <div class="smallItem halfCrossSize" style="float: left"></div> 56 </div> 57 58 </body> 59 </html>