flexbox-collapsed-item-horiz-002-ref.html (3133B)
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 .flexContainer { 13 display: flex; 14 flex-wrap: wrap; 15 16 /* These let us show where each flex line begins (and hence, how tall 17 the flex lines end up) */ 18 align-content: flex-start; 19 align-items: flex-start; 20 21 width: 30px; 22 background: yellow; 23 border: 1px dotted black; 24 float: left; 25 margin: 5px; 26 } 27 .collapsedItem { 28 width: 0; 29 height: 25px; 30 } 31 .halfWidthItem { 32 width: 15px; 33 height: 15px; 34 background: teal; 35 } 36 .fullWidthItem { 37 width: 30px; 38 height: 20px; 39 background: purple; 40 } 41 .veryTallItem { 42 width: 15px; 43 height: 40px; 44 background: olive; 45 } 46 </style> 47 </head> 48 <body> 49 <!-- FIRST ROW: --> 50 <!-- One collapsed flex item, at the beginning of a flex line, which 51 ends up establishing its flex line's cross size: --> 52 <div class="flexContainer"> 53 <div class="collapsedItem"></div> 54 <div class="halfWidthItem"></div> 55 <div class="fullWidthItem"></div> 56 </div> 57 <!-- ...and now with it being at the end of that flex line: --> 58 <div class="flexContainer"> 59 <div class="halfWidthItem"></div> 60 <div class="collapsedItem"></div> 61 <div class="fullWidthItem"></div> 62 </div> 63 64 <div style="clear: both"></div> 65 66 <!-- SECOND ROW: --> 67 <!-- One collapsed flex item, initially in its own line. It ends 68 up being merged into another line after it collapses, due to its 69 (post-collapse) zero main-size. --> 70 <div class="flexContainer"> 71 <div class="collapsedItem"></div> 72 <div class="fullWidthItem"></div> 73 <div class="fullWidthItem"></div> 74 </div> 75 <div class="flexContainer"> 76 <div class="fullWidthItem"></div> 77 <div class="collapsedItem"></div> 78 <div class="fullWidthItem"></div> 79 </div> 80 <div class="flexContainer"> 81 <div class="fullWidthItem"></div> 82 <div class="fullWidthItem"></div> 83 <div class="collapsedItem"></div> 84 </div> 85 86 <div style="clear: both"></div> 87 88 <!-- THIRD ROW: --> 89 <!-- One collapsed flex item, initially in a line with an even-taller item. 90 The collapsed item ends up shifting into another line after it 91 collapses, but it carries the taller item's cross size with it, as its 92 strut size. --> 93 <div class="flexContainer"> 94 <div class="fullWidthItem"></div> 95 <div class="collapsedItem" style="height: 40px"></div> 96 <div class="veryTallItem"></div> 97 </div> 98 <!-- ...and now with two (differently-sized) struts in first line: 99 (the one that's taller - due to being initially grouped with the tall 100 item - wins out.) --> 101 <div class="flexContainer"> 102 <div class="collapsedItem"></div> 103 <div class="fullWidthItem"></div> 104 <div class="collapsedItem" style="height: 40px"></div> 105 <div class="veryTallItem"></div> 106 </div> 107 </body> 108 </html>