align-content-block-001.html (2827B)
1 <!DOCTYPE html> 2 <title>CSS Box Alignment: non-normal align-content establishes block formatting context root on blocks</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-001-ref.html"> 6 7 <style> 8 html, body { margin: 0; font-size: 10px; line-height: 1; color: transparent; } 9 /* show bounds of test box without interfering with margin-collapsing */ 10 .test { background: black; padding-right: 2px; margin: 0.5em; } 11 /* ensure float cannot penetrate */ 12 .outer-float { float: left; height: 600px; /* reftest limit = 600px */ 13 margin: 0 1em; background: gray; } 14 /* ensure float is contained */ 15 .float { float: left; background: orange; height: 2em } 16 /* ensure margin is contained */ 17 .in-flow { margin-top: 1em; background: orange } 18 </style> 19 20 <div class="outer-float">FLT</div> 21 <div class="test" style="align-content: start"> 22 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 23 </div> 24 <div class="test" style="align-content: center"> 25 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 26 </div> 27 <div class="test" style="align-content: end"> 28 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 29 </div> 30 <div class="test" style="align-content: baseline"> 31 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 32 </div> 33 <div class="test" style="align-content: flex-start"> 34 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 35 </div> 36 <div class="test" style="align-content: flex-end"> 37 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 38 </div> 39 <div class="test" style="align-content: unsafe start"> 40 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 41 </div> 42 <div class="test" style="align-content: unsafe center"> 43 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 44 </div> 45 <div class="test" style="align-content: unsafe end"> 46 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 47 </div> 48 <div class="test" style="align-content: safe start"> 49 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 50 </div> 51 <div class="test" style="align-content: safe center"> 52 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 53 </div> 54 <div class="test" style="align-content: safe end"> 55 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 56 </div> 57 <div class="test" style="align-content: space-between"> 58 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 59 </div> 60 <div class="test" style="align-content: space-around"> 61 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 62 </div> 63 <div class="test" style="align-content: start; align-content: normal"> 64 <div class="in-flow"><div class="float">FLT</div>BLOCK</div> 65 </div>