align-content-block-012-ref.html (5985B)
1 <!DOCTYPE html> 2 <title>CSS Box Alignment: align-content on large 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 <style title="Needed for automation; delete to review/debug"> 6 @import "/fonts/ahem.css"; 7 html { font: 15px/1 Ahem; max-width: 800px; } 8 </style> 9 <style> 10 .test { height: 3em; margin: 0.5em 1.25em; box-sizing: border-box; 11 /* show bounds of test box without interfering with margin-collapsing */ 12 border-left: solid blue 5px; 13 /* ensure bullet follows first line */ 14 display: list-item; 15 /* don't wrap, as that will throw off the reference */ 16 white-space: nowrap; } 17 /* cram into 800x600 */ 18 html { max-height: 600px; columns: 3 } 19 .wrapper { break-inside: avoid; border: solid 2px gray; } 20 /* predictability */ 21 input { height: 4px; margin: 0; vertical-align: 4px; } 22 img { height: 8px }</style> 23 <body> 24 <div class="wrapper"> 25 <div class="test" style="" title="start"> 26 STRT 27 <input type=checkbox> 28 <img src='../../support/swatch-orange.png'> 29 <span> 30 x 31 <input type=checkbox> 32 <img src='../../support/swatch-orange.png'> 33 </div> 34 </div> 35 <div class="wrapper"> 36 <div class="test" style="padding-top: 1em" title="center"> 37 CNTR 38 <input type=checkbox> 39 <img src='../../support/swatch-orange.png'> 40 <span> 41 x 42 <input type=checkbox> 43 <img src='../../support/swatch-orange.png'> 44 </div> 45 </div> 46 </div> 47 <div class="wrapper"> 48 <div class="test" style="padding-top: 2em" title="end"> 49 ENDD 50 <input type=checkbox> 51 <img src='../../support/swatch-orange.png'> 52 <span> 53 x 54 <input type=checkbox> 55 <img src='../../support/swatch-orange.png'> 56 </div> 57 </div> 58 </div> 59 <div class="wrapper"> 60 <div class="test" style="" title="baseline"> 61 BSLN 62 <input type=checkbox> 63 <img src='../../support/swatch-orange.png'> 64 <span> 65 x 66 <input type=checkbox> 67 <img src='../../support/swatch-orange.png'> 68 </div> 69 </div> 70 </div> 71 <div class="wrapper"> 72 <div class="test" style="padding-top: 2em" title="last baseline"> 73 LBSL 74 <input type=checkbox> 75 <img src='../../support/swatch-orange.png'> 76 <span> 77 x 78 <input type=checkbox> 79 <img src='../../support/swatch-orange.png'> 80 </div> 81 </div> 82 </div> 83 <div class="wrapper"> 84 <div class="test" style="" title="flex-start"> 85 FSTR 86 <input type=checkbox> 87 <img src='../../support/swatch-orange.png'> 88 <span> 89 x 90 <input type=checkbox> 91 <img src='../../support/swatch-orange.png'> 92 </div> 93 </div> 94 </div> 95 <div class="wrapper"> 96 <div class="test" style="padding-top: 2em" title="flex-end"> 97 FEND 98 <input type=checkbox> 99 <img src='../../support/swatch-orange.png'> 100 <span> 101 x 102 <input type=checkbox> 103 <img src='../../support/swatch-orange.png'> 104 </div> 105 </div> 106 </div> 107 <div class="wrapper"> 108 <div class="test" style="" title="unsafe start"> 109 USTR 110 <input type=checkbox> 111 <img src='../../support/swatch-orange.png'> 112 <span> 113 x 114 <input type=checkbox> 115 <img src='../../support/swatch-orange.png'> 116 </div> 117 </div> 118 </div> 119 <div class="wrapper"> 120 <div class="test" style="padding-top: 1em" title="unsafe center"> 121 UCNT 122 <input type=checkbox> 123 <img src='../../support/swatch-orange.png'> 124 <span> 125 x 126 <input type=checkbox> 127 <img src='../../support/swatch-orange.png'> 128 </div> 129 </div> 130 </div> 131 <div class="wrapper"> 132 <div class="test" style="padding-top: 2em" title="unsafe end"> 133 UEND 134 <input type=checkbox> 135 <img src='../../support/swatch-orange.png'> 136 <span> 137 x 138 <input type=checkbox> 139 <img src='../../support/swatch-orange.png'> 140 </div> 141 </div> 142 </div> 143 <div class="wrapper"> 144 <div class="test" style="" title="safe start"> 145 SSTR 146 <img src='../../support/swatch-orange.png'> 147 <span> 148 x 149 <input type=checkbox> 150 <img src='../../support/swatch-orange.png'> 151 </div> 152 </div> 153 </div> 154 <div class="wrapper"> 155 <div class="test" style="padding-top: 1em" title="safe center"> 156 SCNT 157 <input type=checkbox> 158 <img src='../../support/swatch-orange.png'> 159 <span> 160 x 161 <input type=checkbox> 162 <img src='../../support/swatch-orange.png'> 163 </div> 164 </div> 165 </div> 166 <div class="wrapper"> 167 <div class="test" style="padding-top: 2em" title="safe end"> 168 SEND 169 <input type=checkbox> 170 <img src='../../support/swatch-orange.png'> 171 <span> 172 x 173 <input type=checkbox> 174 <img src='../../support/swatch-orange.png'> 175 </div> 176 </div> 177 <div class="wrapper"> 178 <div class="test" style="padding-top: 1em" title="space-evenly"> 179 SEVN 180 <input type=checkbox> 181 <img src='../../support/swatch-orange.png'> 182 <span> 183 x 184 <input type=checkbox> 185 <img src='../../support/swatch-orange.png'> 186 </div> 187 </div> 188 </div> 189 <div class="wrapper"> 190 <div class="test" style="" title="space-between"> 191 SBTW 192 <input type=checkbox> 193 <img src='../../support/swatch-orange.png'> 194 <span> 195 x 196 <input type=checkbox> 197 <img src='../../support/swatch-orange.png'> 198 </div> 199 </div> 200 </div> 201 <div class="wrapper"> 202 <div class="test" style="padding-top: 1em" title="space-around"> 203 SARN 204 <input type=checkbox> 205 <img src='../../support/swatch-orange.png'> 206 <span> 207 x 208 <input type=checkbox> 209 <img src='../../support/swatch-orange.png'> 210 </div> 211 </div> 212 </div> 213 <div class="wrapper"> 214 <div class="test" style="" title="normal"> 215 NRML 216 <input type=checkbox> 217 <img src='../../support/swatch-orange.png'> 218 <span> 219 x 220 <input type=checkbox> 221 <img src='../../support/swatch-orange.png'> 222 </div> 223 </div> 224 </div> 225 <p> 226 <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> 227 </p> 228 </body>