align-content-block-break-content-010.html (3459B)
1 <!DOCTYPE html> 2 <title>CSS Box Alignment: align-content block fragmentation: simple content</title> 3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 4 <link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block"> 5 <meta name="flags" content="may"> 6 <!-- fragmented alignment is underdefined; these are two possibilities --> 7 <link rel="match" href="align-content-block-break-content-010-aligned-ref.html"> 8 <link rel="match" href="align-content-block-break-content-010-unaligned-ref.html"> 9 10 <style title="Needed for automation; delete to review/debug"> 11 @import "/fonts/ahem.css"; 12 html { font: 10px/1 Ahem; max-width: 780px; } 13 </style> 14 15 <style> 16 .pager { 17 column-fill: auto; 18 column-width: 15em; 19 height: 5em; 20 } 21 .test { 22 height: 19em; 23 /* show bounds of test box without interfering with margin-collapsing */ 24 border-inline: solid black 1em; 25 } 26 .large, .float { 27 height: 2.5em; 28 break-inside: avoid; 29 padding: 2px; /* using padding because of margin handling bugs 30 margin: 2px; 31 switch back once fixed */ 32 background: orange; 33 } 34 .float { 35 float: right; 36 } 37 .nobr { 38 break-inside: avoid; 39 } 40 41 /* readability */ 42 .pager { border: solid 2px gray; margin: 0.5em 0; } 43 .test { color: #8888; text-align: center; } 44 .label { color: black; font-weight: bold; } 45 </style> 46 47 <!-- 48 This test creates breaks: 49 * after some directly-contained text 50 * after a fixed-height block 51 * through some nested text 52 * after a block containing text 53 --> 54 55 <div class="pager"> 56 <div class="test" style="align-content: center"> 57 <span class="label">CENTER</span><br>LINE 2<br>LINE 3 58 <div class="large"></div> 59 <div class="large"></div> 60 <div> 61 LINE 4 62 <div class="nobr">LINE 5<br>LINE 6</div> 63 </div> 64 </div> 65 </div> 66 </div> 67 68 69 <div class="pager"> 70 <div class="test" style="align-content: end"> 71 <span class="label">END</span><br>LINE 2<br>LINE 3 72 <div class="large"></div> 73 <div class="large"></div> 74 <div> 75 LINE 4 76 <div class="nobr">LINE 5<br>LINE 6</div> 77 </div> 78 </div> 79 </div> 80 </div> 81 82 <div class="pager"> 83 <div class="test" style="align-content: baseline"> 84 <span class="label">BASELINE</span><br>LINE 2<br>LINE 3 85 <div class="large"></div> 86 <div class="large"></div> 87 <div> 88 LINE 4 89 <div class="nobr">LINE 5<br>LINE 6</div> 90 </div> 91 </div> 92 </div> 93 </div> 94 95 <div class="pager"> 96 <div class="test" style="align-content: last baseline"> 97 <span class="label">LAST BASELINE</span><br>LINE 2<br>LINE 3 98 <div class="large"></div> 99 <div class="large"></div> 100 <div> 101 LINE 4 102 <div class="nobr">LINE 5<br>LINE 6</div> 103 </div> 104 </div> 105 </div> 106 </div> 107 108 <div class="pager"> 109 <div class="test" style="align-content: unsafe center"> 110 <span class="label">UNSAFE CENTER</span><br>LINE 2<br>LINE 3 111 <div class="large"></div> 112 <div class="large"></div> 113 <div> 114 LINE 4 115 <div class="nobr">LINE 5<br>LINE 6</div> 116 </div> 117 </div> 118 </div> 119 </div> 120 121 122 <div class="pager"> 123 <div class="test" style="align-content: unsafe end"> 124 <span class="label">UNSAFE END</span><br>LINE 2<br>LINE 3 125 <div class="large"></div> 126 <div class="large"></div> 127 <div> 128 LINE 4 129 <div class="nobr">LINE 5<br>LINE 6</div> 130 </div> 131 </div> 132 </div> 133 </div>