flex-container-max-content-001-ref.html (8358B)
1 <!DOCTYPE html> 2 <title>Flex Container Min-Content Main Sizing: Flex Item Min-Content Contributions Reference</title> 3 4 <style> 5 @import "/fonts/ahem.css"; /* optional */ 6 7 body { 8 /* Fit it in 800x600 pixels */ 9 display: grid; 10 grid-template-columns: repeat(auto-fill, 66px 66px 66px); 11 grid-auto-rows: 50px; 12 font: 10px/1 Ahem, monospace; 13 } 14 15 .wrap { 16 counter-increment: test; 17 } 18 19 .row, .col { 20 background: blue; 21 padding: 5px; 22 float: left; 23 } 24 25 .item { 26 padding: 3px; 27 border: 2px solid aqua; 28 color: orange; 29 } 30 31 32 /* help people debugging */ 33 .wrap:hover::before { 34 content: counter(test, decimal-leading-zero); 35 position: absolute; 36 font: initial; 37 } 38 </style> 39 40 <!-- 41 42 { row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis } 43 44 --> 45 46 <!-- 01 row x flexible x none x harmonious --> 47 <div class="wrap"> 48 <div class="row"> 49 <div class="item" style="width: 3ch">X X</div> 50 </div> 51 </div> 52 53 <!-- 02 row x flexible x small x harmonious --> 54 <div class="wrap"> 55 <div class="row"> 56 <div class="item" style="width: 3ch">X X</div> 57 </div> 58 </div> 59 60 <!-- 03 row x flexible x large x harmonious --> 61 <div class="wrap"> 62 <div class="row"> 63 <div class="item" style="width: 4ch">X X</div> 64 </div> 65 </div> 66 67 68 <!-- 04 row x flexible x none x disjoint --> 69 <div class="wrap"> 70 <div class="row"> 71 <div class="item" style="width: 3ch">X X</div> 72 </div> 73 </div> 74 75 <!-- 05 row x flexible x small x disjoint --> 76 <div class="wrap"> 77 <div class="row"> 78 <div class="item" style="width: 3ch">X X</div> 79 </div> 80 </div> 81 82 <!-- 06 row x flexible x large x disjoint --> 83 <div class="wrap"> 84 <div class="row"> 85 <div class="item" style="width: 4ch">X X</div> 86 </div> 87 </div> 88 89 90 91 <!-- 07 row x no-grow x none x harmonious --> 92 <div class="wrap"> 93 <div class="row"> 94 <div class="item" style="width: 3ch">X X</div> 95 </div> 96 </div> 97 98 <!-- 08 row x no-grow x small x harmonious --> 99 <div class="wrap"> 100 <div class="row"> 101 <div class="item" style="width: 0.4ch">X X</div> 102 </div> 103 </div> 104 105 <!-- 09 row x no-grow x large x harmonious --> 106 <div class="wrap"> 107 <div class="row"> 108 <div class="item" style="width: 4ch">X X</div> 109 </div> 110 </div> 111 112 113 <!-- 10 row x no-grow x none x larger --> 114 <div class="wrap"> 115 <div class="row"> 116 <div class="item" style="width: 3ch">X X</div> 117 </div> 118 </div> 119 120 <!-- 11 row x no-grow x small x larger --> 121 <div class="wrap"> 122 <div class="row"> 123 <div class="item" style="width: 3ch">X X</div> 124 </div> 125 </div> 126 127 <!-- 12 row x no-grow x large x larger --> 128 <div class="wrap"> 129 <div class="row"> 130 <div class="item" style="width: 4ch">X X</div> 131 </div> 132 </div> 133 134 135 <!-- 13 row x no-grow x none x smaller --> 136 <div class="wrap"> 137 <div class="row"> 138 <div class="item" style="width: 0.2ch">X X</div> 139 </div> 140 </div> 141 142 <!-- 14 row x no-grow x smaller x smaller --> 143 <div class="wrap"> 144 <div class="row"> 145 <div class="item" style="width: 0.2ch">X X</div> 146 </div> 147 </div> 148 149 <!-- 15 row x no-grow x larger x smaller --> 150 <div class="wrap"> 151 <div class="row"> 152 <div class="item" style="width: 0.2ch">X X</div> 153 </div> 154 </div> 155 156 157 158 <!-- 16 row x no-shrink x none x harmonious --> 159 <div class="wrap"> 160 <div class="row"> 161 <div class="item" style="width: 3ch">X X</div> 162 </div> 163 </div> 164 165 <!-- 17 row x no-shrink x small x harmonious --> 166 <div class="wrap"> 167 <div class="row"> 168 <div class="item" style="width: 3ch">X X</div> 169 </div> 170 </div> 171 172 <!-- 18 row x no-shrink x large x harmonious --> 173 <div class="wrap"> 174 <div class="row"> 175 <div class="item" style="width: 4ch">X X</div> 176 </div> 177 </div> 178 179 180 <!-- 19 row x no-shrink x none x larger --> 181 <div class="wrap"> 182 <div class="row"> 183 <div class="item" style="width: 4.5ch">X X</div> 184 </div> 185 </div> 186 187 <!-- 20 row x no-shrink x small x larger --> 188 <div class="wrap"> 189 <div class="row"> 190 <div class="item" style="width: 4.5ch">X X</div> 191 </div> 192 </div> 193 194 <!-- 21 row x no-shrink x large x larger --> 195 <div class="wrap"> 196 <div class="row"> 197 <div class="item" style="width: 4.5ch">X X</div> 198 </div> 199 </div> 200 201 202 <!-- 22 row x no-shrink x none x smaller --> 203 <div class="wrap"> 204 <div class="row"> 205 <div class="item" style="width: 3ch">X X</div> 206 </div> 207 </div> 208 209 <!-- 23 row x no-shrink x smaller x smaller --> 210 <div class="wrap"> 211 <div class="row"> 212 <div class="item" style="width: 3ch">X X</div> 213 </div> 214 </div> 215 216 <!-- 24 row x no-shrink x larger x smaller --> 217 <div class="wrap"> 218 <div class="row"> 219 <div class="item" style="width: 4ch">X X</div> 220 </div> 221 </div> 222 223 224 <!-- ###################################################################### --> 225 226 227 <!-- 01 col x flexible x none x harmonious --> 228 <div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section --> 229 <div class="col"> 230 <div class="item" style="height: 1em">X</div> 231 </div> 232 </div> 233 234 <!-- 02 col x flexible x small x harmonious --> 235 <div class="wrap"> 236 <div class="col"> 237 <div class="item" style="height: 1em">X</div> 238 </div> 239 </div> 240 241 <!-- 03 col x flexible x large x harmonious --> 242 <div class="wrap"> 243 <div class="col"> 244 <div class="item" style="height: 1.5em">X</div> 245 </div> 246 </div> 247 248 249 <!-- 04 col x flexible x none x disjoint --> 250 <div class="wrap"> 251 <div class="col"> 252 <div class="item" style="height: 1em">X</div> 253 </div> 254 </div> 255 256 <!-- 05 col x flexible x small x disjoint --> 257 <div class="wrap"> 258 <div class="col"> 259 <div class="item" style="height: 1em">X</div> 260 </div> 261 </div> 262 263 <!-- 06 col x flexible x large x disjoint --> 264 <div class="wrap"> 265 <div class="col"> 266 <div class="item" style="height: 1.5em">X</div> 267 </div> 268 </div> 269 270 271 272 <!-- 07 col x no-grow x none x harmonious --> 273 <div class="wrap"> 274 <div class="col"> 275 <div class="item" style="height: 1em">X</div> 276 </div> 277 </div> 278 279 <!-- 08 col x no-grow x small x harmonious --> 280 <div class="wrap"> 281 <div class="col"> 282 <div class="item" style="height: 0.4em">X</div> 283 </div> 284 </div> 285 286 <!-- 09 col x no-grow x large x harmonious --> 287 <div class="wrap"> 288 <div class="col"> 289 <div class="item" style="height: 1.5em">X</div> 290 </div> 291 </div> 292 293 294 <!-- 10 col x no-grow x none x larger --> 295 <div class="wrap"> 296 <div class="col"> 297 <div class="item" style="height: 1em">X</div> 298 </div> 299 </div> 300 301 <!-- 11 col x no-grow x small x larger --> 302 <div class="wrap"> 303 <div class="col"> 304 <div class="item" style="height: 0.4em">X</div> 305 </div> 306 </div> 307 308 <!-- 12 col x no-grow x large x larger --> 309 <div class="wrap"> 310 <div class="col"> 311 <div class="item" style="height: 1.5em">X</div> 312 </div> 313 </div> 314 315 316 <!-- 13 col x no-grow x none x smaller --> 317 <div class="wrap"> 318 <div class="col"> 319 <div class="item" style="height: 0.2em">X</div> 320 </div> 321 </div> 322 323 <!-- 14 col x no-grow x smaller x smaller --> 324 <div class="wrap"> 325 <div class="col"> 326 <div class="item" style="height: 0.2em">X</div> 327 </div> 328 </div> 329 330 <!-- 15 col x no-grow x larger x smaller --> 331 <div class="wrap"> 332 <div class="col"> 333 <div class="item" style="height: 0.2em">X</div> 334 </div> 335 </div> 336 337 338 339 <!-- 16 col x no-shrink x none x harmonious --> 340 <div class="wrap"> 341 <div class="col"> 342 <div class="item" style="height: 1em">X</div> 343 </div> 344 </div> 345 346 <!-- 17 col x no-shrink x small x harmonious --> 347 <div class="wrap"> 348 <div class="col"> 349 <div class="item" style="height: 1em">X</div> 350 </div> 351 </div> 352 353 <!-- 18 col x no-shrink x large x harmonious --> 354 <div class="wrap"> 355 <div class="col"> 356 <div class="item" style="height: 1.5em">X</div> 357 </div> 358 </div> 359 360 361 <!-- 19 col x no-shrink x none x larger --> 362 <div class="wrap"> 363 <div class="col"> 364 <div class="item" style="height: 1em">X</div> 365 </div> 366 </div> 367 368 <!-- 20 col x no-shrink x small x larger --> 369 <div class="wrap"> 370 <div class="col"> 371 <div class="item" style="height: 1em">X</div> 372 </div> 373 </div> 374 375 <!-- 21 col x no-shrink x large x larger --> 376 <div class="wrap"> 377 <div class="col"> 378 <div class="item" style="height: 1.5em">X</div> 379 </div> 380 </div> 381 382 383 <!-- 22 col x no-shrink x none x smaller --> 384 <div class="wrap"> 385 <div class="col"> 386 <div class="item" style="height: 1em">X</div> 387 </div> 388 </div> 389 390 <!-- 23 col x no-shrink x smaller x smaller --> 391 <div class="wrap"> 392 <div class="col"> 393 <div class="item" style="height: 1em">X</div> 394 </div> 395 </div> 396 397 <!-- 24 col x no-shrink x larger x smaller --> 398 <div class="wrap"> 399 <div class="col"> 400 <div class="item" style="height: 1.5em">X</div> 401 </div> 402 </div>