フレックスボックスの同じ行にテキストを揃える方法は？

Question

私はFlexboxを使って2つの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

あなたが探しているものはベースラインアラインメントと呼ばれています。

フレックスボックスでこれを達成するには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;