align-content-block-003.html (8538B)
1 <!DOCTYPE html> 2 <title>CSS Box Alignment: align-content on small block container</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: 0.5em; margin: 0.5em 2em; 19 /* show bounds of test box without interfering with margin-collapsing */ 20 background: black; padding-right: 2px; 21 /* ensure bullet follows first line */ 22 display: list-item; } 23 /* ensure margin is contained */ 24 .in-flow { margin: 1em 0 0.5em; 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; padding: 2em 0; } 36 37 /* readability */ 38 .test > * { color: #8888; } 39 .label { color: black; font-weight: bold; } 40 </style> 41 42 <div class="wrapper"> 43 <div class="test" style="align-content: start" title="start"> 44 <div class="in-flow" data-offset-y="35"></div> 45 <div class="in-flow"> 46 <span class="label">START</span> 47 <span class="abspos" data-offset-y="20">ABS</span> 48 <span class="relpos" data-offset-y="20">REL</span> 49 <div class="overflow">OVERFLOW</div> 50 </div> 51 </div> 52 </div> 53 <div class="wrapper"> 54 <div class="test" style="align-content: center" title="center"> 55 <div class="in-flow" data-offset-y="35"></div> 56 <div class="in-flow"> 57 <span class="label">CENTER</span> 58 <span class="abspos" data-offset-y="20">ABS</span> 59 <span class="relpos" data-offset-y="20">REL</span> 60 <div class="overflow">OVERFLOW</div> 61 </div> 62 </div> 63 </div> 64 <div class="wrapper"> 65 <div class="test" style="align-content: end" title="end"> 66 <div class="in-flow" data-offset-y="35"></div> 67 <div class="in-flow"> 68 <span class="label">END</span> 69 <span class="abspos" data-offset-y="20">ABS</span> 70 <span class="relpos" data-offset-y="20">REL</span> 71 <div class="overflow">OVERFLOW</div> 72 </div> 73 </div> 74 </div> 75 <div class="wrapper"> 76 <div class="test" style="align-content: baseline" title="baseline"> 77 <div class="in-flow" data-offset-y="35"></div> 78 <div class="in-flow"> 79 <span class="label">BASELINE</span> 80 <span class="abspos" data-offset-y="20">ABS</span> 81 <span class="relpos" data-offset-y="20">REL</span> 82 <div class="overflow">OVERFLOW</div> 83 </div> 84 </div> 85 </div> 86 <div class="wrapper"> 87 <div class="test" style="align-content: last baseline" title="last baseline"> 88 <div class="in-flow" data-offset-y="35"></div> 89 <div class="in-flow"> 90 <span class="label">LAST BASELINE</span> 91 <span class="abspos" data-offset-y="20">ABS</span> 92 <span class="relpos" data-offset-y="20">REL</span> 93 <div class="overflow">OVERFLOW</div> 94 </div> 95 </div> 96 </div> 97 <div class="wrapper"> 98 <div class="test" style="align-content: flex-start" title="flex-start"> 99 <div class="in-flow" data-offset-y="35"></div> 100 <div class="in-flow"> 101 <span class="label">FLEX-START</span> 102 <span class="abspos" data-offset-y="20">ABS</span> 103 <span class="relpos" data-offset-y="20">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-end" title="flex-end"> 110 <div class="in-flow" data-offset-y="35"></div> 111 <div class="in-flow"> 112 <span class="label">FLEX-END</span> 113 <span class="abspos" data-offset-y="20">ABS</span> 114 <span class="relpos" data-offset-y="20">REL</span> 115 <div class="overflow">OVERFLOW</div> 116 </div> 117 </div> 118 </div> 119 <div class="wrapper"> 120 <div class="test" style="align-content: unsafe start" title="unsafe start"> 121 <div class="in-flow" data-offset-y="35"></div> 122 <div class="in-flow"> 123 <span class="label">UNSAFE START</span> 124 <span class="abspos" data-offset-y="20">ABS</span> 125 <span class="relpos" data-offset-y="20">REL</span> 126 <div class="overflow">OVERFLOW</div> 127 </div> 128 </div> 129 </div> 130 <div class="wrapper"> 131 <div class="test" style="align-content: unsafe center" title="unsafe center"> 132 <div class="in-flow" data-offset-y="25"></div> 133 <div class="in-flow"> 134 <span class="label">UNSAFE CENTER</span> 135 <span class="abspos" data-offset-y="10">ABS</span> 136 <span class="relpos" data-offset-y="10">REL</span> 137 <div class="overflow">OVERFLOW</div> 138 </div> 139 </div> 140 </div> 141 <div class="wrapper"> 142 <div class="test" style="align-content: unsafe end" title="unsafe end"> 143 <div class="in-flow" data-offset-y="15"></div> 144 <div class="in-flow"> 145 <span class="label">UNSAFE END</span> 146 <span class="abspos" data-offset-y="0">ABS</span> 147 <span class="relpos" data-offset-y="0">REL</span> 148 <div class="overflow">OVERFLOW</div> 149 </div> 150 </div> 151 </div> 152 <div class="wrapper"> 153 <div class="test" style="align-content: safe start" title="safe start"> 154 <div class="in-flow" data-offset-y="35"></div> 155 <div class="in-flow"> 156 <span class="label">SAFE START</span> 157 <span class="abspos" data-offset-y="20">ABS</span> 158 <span class="relpos" data-offset-y="20">REL</span> 159 <div class="overflow">OVERFLOW</div> 160 </div> 161 </div> 162 </div> 163 <div class="wrapper"> 164 <div class="test" style="align-content: safe center" title="safe center"> 165 <div class="in-flow" data-offset-y="35"></div> 166 <div class="in-flow"> 167 <span class="label">SAFE CENTER</span> 168 <span class="abspos" data-offset-y="20">ABS</span> 169 <span class="relpos" data-offset-y="20">REL</span> 170 <div class="overflow">OVERFLOW</div> 171 </div> 172 </div> 173 </div> 174 <div class="wrapper"> 175 <div class="test" style="align-content: safe end" title="safe end"> 176 <div class="in-flow" data-offset-y="35"></div> 177 <div class="in-flow"> 178 <span class="label">SAFE END</span> 179 <span class="abspos" data-offset-y="20">ABS</span> 180 <span class="relpos" data-offset-y="20">REL</span> 181 <div class="overflow">OVERFLOW</div> 182 </div> 183 </div> 184 </div> 185 <div class="wrapper"> 186 <div class="test" style="align-content: space-evenly" title="space-evently"> 187 <div class="in-flow" data-offset-y="35"></div> 188 <div class="in-flow"> 189 <span class="label">SPACE-EVENLY</span> 190 <span class="abspos" data-offset-y="20">ABS</span> 191 <span class="relpos" data-offset-y="20">REL</span> 192 <div class="overflow">OVERFLOW</div> 193 </div> 194 </div> 195 </div> 196 <div class="wrapper"> 197 <div class="test" style="align-content: space-between" title="space-between"> 198 <div class="in-flow" data-offset-y="35"></div> 199 <div class="in-flow"> 200 <span class="label">SPACE-BETWEEN</span> 201 <span class="abspos" data-offset-y="20">ABS</span> 202 <span class="relpos" data-offset-y="20">REL</span> 203 <div class="overflow">OVERFLOW</div> 204 </div> 205 </div> 206 </div> 207 <div class="wrapper"> 208 <div class="test" style="align-content: space-around" title="space-around"> 209 <div class="in-flow" data-offset-y="35"></div> 210 <div class="in-flow"> 211 <span class="label">SPACE-AROUND</span> 212 <span class="abspos" data-offset-y="20">ABS</span> 213 <span class="relpos" data-offset-y="20">REL</span> 214 <div class="overflow">OVERFLOW</div> 215 </div> 216 </div> 217 </div> 218 <div class="wrapper"> 219 <div class="test" style="align-content: normal" title="normal"> 220 <div class="in-flow" data-offset-y="30"></div> 221 <div class="in-flow"> 222 <span class="label">NORMAL</span> 223 <span class="abspos" data-offset-y="15">ABS</span> 224 <span class="relpos" data-offset-y="15">REL</span> 225 <div class="overflow">OVERFLOW</div> 226 </div> 227 </div> 228 </div> 229 230 <p> 231 <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> 232 </p> 233 234 <script> 235 document.fonts.ready.then(() => checkLayout(".test")); 236 </script>