如何在flexbox的同一行上对齐文本?
问题描述:
我已经使用Flexbox并排对齐了两个div,并且我希望这两个div中的文本都以相同的级别推到div的底部,但似乎在各个文本下面有不同的间距级别。如何在flexbox的同一行上对齐文本?
.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>
感谢您的帮助!
答
你在找什么叫做基准比对。
要在flexbox中使用align-items: 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>
答
家长:
display: flex;
子女:
flex: 1;
由于字体大小不同,这是行高的问题。阅读相关资产https://developer.mozilla.org/en-US/docs/Web/CSS/line-height – CBroe