flex-align-baseline-flex-003.html (5721B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> 3 <style> 4 .target { 5 display: flex; 6 position: relative; 7 line-height: 0; 8 font-size: 20px; 9 inline-size: 200px; 10 margin-block: 10px; 11 padding: 10px; 12 border: solid 3px; 13 } 14 15 .inner { 16 display: flex; 17 border: solid 5px; 18 padding: 10px; 19 gap: 10px; 20 } 21 22 span { 23 display: inline-block; 24 width: 1em; 25 height: 1em; 26 outline: solid cyan 3px; 27 outline-offset: -3px; 28 } 29 </style> 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 <script src="/resources/check-layout-th.js"></script> 33 <body onload="checkLayout('.target > *')"> 34 35 <div class="target" style="align-items: first baseline;"> 36 <div data-offset-y="45"><span></span></div> 37 <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> 38 <div style="font-size: 10px;"><span></span></div> 39 <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> 40 <div style="font-size: 50px;"><span></span></div> 41 <div style="font-size: 60px;"><span></span></div> 42 <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> 43 <div style="font-size: 20px;"><span></span></div> 44 </div> 45 </div> 46 47 <div class="target" style="align-items: first baseline;"> 48 <div data-offset-y="45"><span></span></div> 49 <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> 50 <div style="font-size: 10px;"><span></span></div> 51 <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> 52 <div style="font-size: 50px;"><span></span></div> 53 <div style="font-size: 60px;"><span></span></div> 54 <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> 55 <div style="font-size: 20px;"><span></span></div> 56 </div> 57 </div> 58 59 <div class="target" style="align-items: first baseline;"> 60 <div data-offset-y="55"><span></span></div> 61 <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> 62 <div style="font-size: 10px;"><span></span></div> 63 <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> 64 <div style="font-size: 50px;"><span></span></div> 65 <div style="font-size: 60px;"><span></span></div> 66 <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> 67 <div style="font-size: 20px;"><span></span></div> 68 </div> 69 </div> 70 71 <div class="target" style="align-items: first baseline;"> 72 <div data-offset-y="55"><span></span></div> 73 <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> 74 <div style="font-size: 10px;"><span></span></div> 75 <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> 76 <div style="font-size: 50px;"><span></span></div> 77 <div style="font-size: 60px;"><span></span></div> 78 <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> 79 <div style="font-size: 20px;"><span></span></div> 80 </div> 81 </div> 82 83 <div class="target" style="align-items: last baseline;"> 84 <div data-offset-y="115"><span></span></div> 85 <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> 86 <div style="font-size: 10px;"><span></span></div> 87 <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> 88 <div style="font-size: 50px;"><span></span></div> 89 <div style="font-size: 60px;"><span></span></div> 90 <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> 91 <div style="font-size: 20px;"><span></span></div> 92 </div> 93 </div> 94 95 <div class="target" style="align-items: last baseline;"> 96 <div data-offset-y="115"><span></span></div> 97 <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> 98 <div style="font-size: 10px;"><span></span></div> 99 <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> 100 <div style="font-size: 50px;"><span></span></div> 101 <div style="font-size: 60px;"><span></span></div> 102 <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> 103 <div style="font-size: 20px;"><span></span></div> 104 </div> 105 </div> 106 107 <div class="target" style="align-items: last baseline;"> 108 <div data-offset-y="115"><span></span></div> 109 <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> 110 <div style="font-size: 10px;"><span></span></div> 111 <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> 112 <div style="font-size: 50px;"><span></span></div> 113 <div style="font-size: 60px;"><span></span></div> 114 <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> 115 <div style="font-size: 20px;"><span></span></div> 116 </div> 117 </div> 118 119 <div class="target" style="align-items: last baseline;"> 120 <div data-offset-y="115"><span></span></div> 121 <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> 122 <div style="font-size: 10px;"><span></span></div> 123 <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> 124 <div style="font-size: 50px;"><span></span></div> 125 <div style="font-size: 60px;"><span></span></div> 126 <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> 127 <div style="font-size: 20px;"><span></span></div> 128 </div> 129 </div>