如何在flexbox的同一行上对齐文本？

Question

我已经使用Flexbox并排对齐了两个div，并且我希望这两个div中的文本都以相同的级别推到div的底部，但似乎在各个文本下面有不同的间距级别。

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.block1 { 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    color: red; 
 
    border: 1px solid; 
 
    display: flex; 
 
    align-items: flex-end; 
 
} 
 

 
.block2 { 
 
    font-size: 1em; 
 
    color: grey; 
 
    border: 1px solid; 
 
    display: flex; 
 
    align-items: flex-end; 
 
} 
 

 
.block1.hack-fix { 
 
    line-height: 29px; /* HACK */ 
 
}

<h2>Current:</h2> 
 
<div class="wrapper"> 
 
    <span class="block1"> 
 
    23 
 
    </span> 
 
    <span class="block2"> 
 
    Quote 
 
    </span> 
 
</div> 
 
<hr/> 
 
<h2>Needed:</h2> 
 
<div class="wrapper"> 
 
    <span class="block1 hack-fix"> 
 
    23 
 
    </span> 
 
    <span class="block2"> 
 
    Quote 
 
    </span> 
 
</div>

感谢您的帮助！

Answer 1

你在找什么叫做基准比对。

要在flexbox中使用align-items: baseline。

下面是一个更完整的解释：

• What's the difference between flex-start and baseline?

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: baseline; /* NEW */ 
 
} 
 

 
.block1 { 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    color: red; 
 
} 
 

 
.block2 { 
 
    font-size: 1em; 
 
    color: grey; 
 
}

<div class="wrapper"> 
 
    <span class="block1">23</span> 
 
    <span class="block2">Quote</span> 
 
</div>

Answer 2

家长：

display: flex; 

子女：

flex: 1;