grid-baseline-002-ref.html (1808B)
1 <!DOCTYPE html> 2 <style> 3 .flexbox { 4 display: flex; 5 } 6 .inline-flexbox { 7 display: inline-flex; 8 } 9 .flex-one { 10 flex: 1; 11 } 12 .inline-block { display: inline-block; } 13 .flexbox, .inline-flexbox { background-color: lightgrey; } 14 .border { border: 11px solid pink; } 15 .padding { padding: 13px; } 16 .margin { margin: 8px 0; } 17 .flexbox > div { 18 min-width: 0; 19 min-height: 0; 20 } 21 </style> 22 <div> 23 before text 24 <div class="border" style="display: inline-block; background-color: lightgrey"> 25 <div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;"> 26 baseline 27 </div> 28 </div> 29 after text 30 </div> 31 32 <div> 33 Should align 34 <div class="inline-block border"> 35 <div class="flexbox padding" style="width: 50px; height: 50px; background-color: pink"> 36 <div class="flex-one" style="background-color: lightgrey"></div> 37 </div> 38 </div> 39 with the 40 <div class="inline-block margin"> 41 <div class="flexbox border" style="width: 50px; height: 50px; background-color: pink"> 42 <div class="flex-one" style="background-color: lightgrey"></div> 43 </div> 44 </div> 45 bottom of 46 <div class="inline-block padding" style="padding-left: 0; padding-right: 0"> 47 <div class="flexbox margin border" style="width: 50px; height: 50px; background-color: pink"> 48 <div class="flex-one" style="background-color: lightgrey;"></div> 49 </div> 50 </div> 51 the grey box. 52 </div> 53 54 <div> 55 Should align with the 56 <div class="inline-block"> 57 <div class="flexbox" style="background-color: white"> 58 <div class="flex-one border padding margin" style="background-color: lightgrey;"></div> 59 </div> 60 </div> 61 bottom of the pink box. 62 </div> 63 64 <div> 65 Should align 8px 66 <div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div> 67 below the bottom 68 <div class="inline-flexbox margin border padding"></div> 69 of the pink box. 70 </div>