flexbox-flex-wrap-vert-001.html (3016B)
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 Test: Testing flex-wrap in vertical flex containers</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> 11 <link rel="match" href="flexbox-flex-wrap-vert-001-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 div.flexbox { 15 display: flex; 16 flex-direction: column; 17 flex-wrap: wrap; 18 border: 1px dashed black; 19 width: 12px; 20 height: 100px; 21 margin-right: 2px; 22 float: left; 23 } 24 div.halfMainSize { 25 height: 48px; 26 border: 1px solid blue; 27 background: lightblue; 28 } 29 div.hugeMainSize { 30 height: 148px; 31 border: 1px solid purple; 32 background: fuchsia; 33 } 34 </style> 35 </head> 36 <body> 37 38 <!-- Single small flex item --> 39 <div class="flexbox"> 40 <div class="halfMainSize"></div> 41 </div> 42 43 <!-- Single small flex item with 'margin-top' set to push it to protrude 44 from the far edge of the container (and to shrink as a result) --> 45 <div class="flexbox"> 46 <div class="halfMainSize" style="margin-top: 80px"></div> 47 </div> 48 49 <!-- Single small inflexible flex item with 'margin-top' set to push it to 50 protrude from the far edge of the container --> 51 <div class="flexbox"> 52 <div class="halfMainSize" style="margin-top: 80px; flex: none"></div> 53 </div> 54 55 <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> 56 <div class="flexbox"> 57 <div class="halfMainSize"></div> 58 <div class="halfMainSize"></div> 59 </div> 60 61 <!-- and now with some margin on first item, to force second item to wrap: --> 62 <div class="flexbox"> 63 <div class="halfMainSize" style="margin-bottom: 1px"></div> 64 <div class="halfMainSize"></div> 65 </div> 66 67 <!-- and now with some margin on second item, again forcing it to wrap: --> 68 <div class="flexbox"> 69 <div class="halfMainSize"></div> 70 <div class="halfMainSize" style="margin-bottom: 1px"></div> 71 </div> 72 73 <!-- Single large flex item: overflows (but does not wrap) and is shrunk 74 to fit container's main-size --> 75 <div class="flexbox"> 76 <div class="hugeMainSize"></div> 77 </div> 78 79 <!-- Single large flex item: overflows (but does not wrap) --> 80 <div class="flexbox"> 81 <div class="hugeMainSize" style="flex: none"></div> 82 </div> 83 84 <!-- Small flex item, followed by large flex item (which wraps to 85 its own line and then shrink to container's main-size) --> 86 <div class="flexbox"> 87 <div class="halfMainSize"></div> 88 <div class="hugeMainSize"></div> 89 </div> 90 91 <!-- Small flex item, followed by large inflexible flex item (which wraps to 92 its own line and then shrink to container's main-size) --> 93 <div class="flexbox"> 94 <div class="halfMainSize"></div> 95 <div class="hugeMainSize" style="flex: none"></div> 96 </div> 97 98 </body> 99 </html>