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