align-content-block-004.html (9661B)
1 <!DOCTYPE html> 2 <title>CSS Box Alignment: align-content on large block container with floats</title> 3 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> 4 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 9 <style title="Needed for automation; delete to review/debug"> 10 @import "/fonts/ahem.css"; 11 html { font: 10px/1 Ahem; max-width: 800px; } 12 .label { display: none; } 13 </style> 14 15 <style> 16 html, body { margin: 0; padding: 0; } 17 18 .test { height: 5em; margin: 0.5em 1em; 19 /* show bounds of test box without interfering with margin-collapsing */ 20 background: black; padding-right: 2px; } 21 /* ensure float is contained */ 22 .float { float: right; background: orange; height: 2em } 23 /* ensure margin is contained */ 24 .in-flow { margin-top: 1em; background: orange } 25 /* ensure relpos is ignored */ 26 .relpos { position: relative; top: -1.5em; } 27 /* ensure abspos static position follows alignment */ 28 .wrapper { position: relative; } 29 .abspos { position: absolute; right: 0; margin-top: -1.5em; } 30 /* ensure overflow is not counted */ 31 .overflow { height: 0; } 32 33 /* cram into 800x600 */ 34 html { max-height: 600px; columns: 3 } 35 .wrapper { break-inside: avoid; border: solid 2px gray; } 36 37 /* readability */ 38 .test > * { color: #8888; } 39 .label { color: black; font-weight: bold; } 40 </style> 41 42 <body onload="checkLayout('.test');"> 43 <div class="wrapper"> 44 <div class="test" style="align-content: start" title="start"> 45 <div class="float" data-offset-y="5">FLT</div> 46 <div class="in-flow" data-offset-y="15"></div> 47 <div class="in-flow"> 48 <div class="float" data-offset-y="15">FLT</div> 49 <span class="label">START</span> 50 <span class="abspos">ABS</span> 51 <span class="relpos">REL</span> 52 <div class="overflow">OVERFLOW</div> 53 </div> 54 </div> 55 </div> 56 <div class="wrapper"> 57 <div class="test" style="align-content: center" title="center"> 58 <div class="float" data-offset-y="15">FLT</div> 59 <div class="in-flow" data-offset-y="25"></div> 60 <div class="in-flow"> 61 <div class="float" data-offset-y="25">FLT</div> 62 <span class="label">CENTER</span> 63 <span class="abspos">ABS</span> 64 <span class="relpos">REL</span> 65 <div class="overflow">OVERFLOW</div> 66 </div> 67 </div> 68 </div> 69 <div class="wrapper"> 70 <div class="test" style="align-content: end" title="end"> 71 <div class="float" data-offset-y="25">FLT</div> 72 <div class="in-flow" data-offset-y="35"></div> 73 <div class="in-flow"> 74 <div class="float" data-offset-y="35">FLT</div> 75 <span class="label">END</span> 76 <span class="abspos">ABS</span> 77 <span class="relpos">REL</span> 78 <div class="overflow">OVERFLOW</div> 79 </div> 80 </div> 81 </div> 82 <div class="wrapper"> 83 <div class="test" style="align-content: baseline" title="baseline"> 84 <div class="float" data-offset-y="5">FLT</div> 85 <div class="in-flow" data-offset-y="15"></div> 86 <div class="in-flow"> 87 <div class="float" data-offset-y="15">FLT</div> 88 <span class="label">BASELINE</span> 89 <span class="abspos">ABS</span> 90 <span class="relpos">REL</span> 91 <div class="overflow">OVERFLOW</div> 92 </div> 93 </div> 94 </div> 95 <div class="wrapper"> 96 <div class="test" style="align-content: last baseline" title="last baseline"> 97 <div class="float" data-offset-y="25">FLT</div> 98 <div class="in-flow" data-offset-y="35"></div> 99 <div class="in-flow"> 100 <div class="float" data-offset-y="35">FLT</div> 101 <span class="label">LAST BASELINE</span> 102 <span class="abspos">ABS</span> 103 <span class="relpos">REL</span> 104 <div class="overflow">OVERFLOW</div> 105 </div> 106 </div> 107 </div> 108 <div class="wrapper"> 109 <div class="test" style="align-content: flex-start" title="flex-start"> 110 <div class="float" data-offset-y="5">FLT</div> 111 <div class="in-flow" data-offset-y="15"></div> 112 <div class="in-flow"> 113 <div class="float" data-offset-y="15">FLT</div> 114 <span class="label">FLEX-START</span> 115 <span class="abspos">ABS</span> 116 <span class="relpos">REL</span> 117 <div class="overflow">OVERFLOW</div> 118 </div> 119 </div> 120 </div> 121 <div class="wrapper"> 122 <div class="test" style="align-content: flex-end" title="flex-end"> 123 <div class="float" data-offset-y="25">FLT</div> 124 <div class="in-flow" data-offset-y="35"></div> 125 <div class="in-flow"> 126 <div class="float" data-offset-y="35">FLT</div> 127 <span class="label">FLEX-END</span> 128 <span class="abspos">ABS</span> 129 <span class="relpos">REL</span> 130 <div class="overflow">OVERFLOW</div> 131 </div> 132 </div> 133 </div> 134 <div class="wrapper"> 135 <div class="test" style="align-content: unsafe start" title="unsafe start"> 136 <div class="float" data-offset-y="5">FLT</div> 137 <div class="in-flow" data-offset-y="15"></div> 138 <div class="in-flow"> 139 <div class="float" data-offset-y="15">FLT</div> 140 <span class="label">UNSAFE START</span> 141 <span class="abspos">ABS</span> 142 <span class="relpos">REL</span> 143 <div class="overflow">OVERFLOW</div> 144 </div> 145 </div> 146 </div> 147 <div class="wrapper"> 148 <div class="test" style="align-content: unsafe center" title="unsafe center"> 149 <div class="float" data-offset-y="15">FLT</div> 150 <div class="in-flow" data-offset-y="25"></div> 151 <div class="in-flow"> 152 <div class="float" data-offset-y="25">FLT</div> 153 <span class="label">UNSAFE CENTER</span> 154 <span class="abspos">ABS</span> 155 <span class="relpos">REL</span> 156 <div class="overflow">OVERFLOW</div> 157 </div> 158 </div> 159 </div> 160 <div class="wrapper"> 161 <div class="test" style="align-content: unsafe end" title="unsafe end"> 162 <div class="float" data-offset-y="25">FLT</div> 163 <div class="in-flow" data-offset-y="35"></div> 164 <div class="in-flow"> 165 <div class="float" data-offset-y="35">FLT</div> 166 <span class="label">UNSAFE END</span> 167 <span class="abspos">ABS</span> 168 <span class="relpos">REL</span> 169 <div class="overflow">OVERFLOW</div> 170 </div> 171 </div> 172 </div> 173 <div class="wrapper"> 174 <div class="test" style="align-content: safe start" title="safe start"> 175 <div class="float" data-offset-y="5">FLT</div> 176 <div class="in-flow" data-offset-y="15"></div> 177 <div class="in-flow"> 178 <div class="float" data-offset-y="15">FLT</div> 179 <span class="label">SAFE START</span> 180 <span class="abspos">ABS</span> 181 <span class="relpos">REL</span> 182 <div class="overflow">OVERFLOW</div> 183 </div> 184 </div> 185 </div> 186 <div class="wrapper"> 187 <div class="test" style="align-content: safe center" title="safe center"> 188 <div class="float" data-offset-y="15">FLT</div> 189 <div class="in-flow" data-offset-y="25"></div> 190 <div class="in-flow"> 191 <div class="float" data-offset-y="25">FLT</div> 192 <span class="label">SAFE CENTER</span> 193 <span class="abspos">ABS</span> 194 <span class="relpos">REL</span> 195 <div class="overflow">OVERFLOW</div> 196 </div> 197 </div> 198 </div> 199 <div class="wrapper"> 200 <div class="test" style="align-content: safe end" title="safe end"> 201 <div class="float" data-offset-y="25">FLT</div> 202 <div class="in-flow" data-offset-y="35"></div> 203 <div class="in-flow"> 204 <div class="float" data-offset-y="35">FLT</div> 205 <span class="label">SAFE END</span> 206 <span class="abspos">ABS</span> 207 <span class="relpos">REL</span> 208 <div class="overflow">OVERFLOW</div> 209 </div> 210 </div> 211 </div> 212 <div class="wrapper"> 213 <div class="test" style="align-content: space-evenly" title="space-evenly"> 214 <div class="float" data-offset-y="15">FLT</div> 215 <div class="in-flow" data-offset-y="25"></div> 216 <div class="in-flow"> 217 <div class="float" data-offset-y="25">FLT</div> 218 <span class="label">SPACE-EVENLY</span> 219 <span class="abspos">ABS</span> 220 <span class="relpos">REL</span> 221 <div class="overflow">OVERFLOW</div> 222 </div> 223 </div> 224 </div> 225 <div class="wrapper"> 226 <div class="test" style="align-content: space-between" title="space-between"> 227 <div class="float" data-offset-y="5">FLT</div> 228 <div class="in-flow" data-offset-y="15"></div> 229 <div class="in-flow"> 230 <div class="float" data-offset-y="15">FLT</div> 231 <span class="label">SPACE-BETWEEN</span> 232 <span class="abspos">ABS</span> 233 <span class="relpos">REL</span> 234 <div class="overflow">OVERFLOW</div> 235 </div> 236 </div> 237 </div> 238 <div class="wrapper"> 239 <div class="test" style="align-content: space-around" title="space-around"> 240 <div class="float" data-offset-y="15">FLT</div> 241 <div class="in-flow" data-offset-y="25"></div> 242 <div class="in-flow"> 243 <div class="float" data-offset-y="25">FLT</div> 244 <span class="label">SPACE-AROUND</span> 245 <span class="abspos">ABS</span> 246 <span class="relpos">REL</span> 247 <div class="overflow">OVERFLOW</div> 248 </div> 249 </div> 250 </div> 251 <div class="wrapper"> 252 <div class="test" style="align-content: normal" title="normal"> 253 <div class="float" data-offset-y="10">FLT</div> 254 <div class="in-flow" data-offset-y="10"></div> 255 <div class="in-flow"> 256 <div class="float" data-offset-y="10">FLT</div> 257 <span class="label">NORMAL</span> 258 <span class="abspos">ABS</span> 259 <span class="relpos">REL</span> 260 <div class="overflow">OVERFLOW</div> 261 </div> 262 </div> 263 </div> 264 265 <p> 266 <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> 267 </body>