背景色の付いた要素をflexboxで高さ揃え+内容を上下中央揃えにする

flexboxでタイトルのような実装をするときにいつも迷うので、実装方法をメモしておきます。

サンプルコード

画像とテキストが左右に並ぶレイアウトで試してみます。

HTML

<div class="list">
	<div class="list_item">
		<div class="list_image">
			<img src="../01.jpg" alt="" />
		</div>
		<div class="list_text">
			<p class="list_ttl"><a href="http://yorimoi.com/" target="_blank">宇宙よりも遠い場所</a></p>
			<p class="list_description">何かを始めたいと思いながら、中々一歩を踏み出すことのできないまま高校2年生になってしまった少女・玉木マリことキマリは、とあることをきっかけに南極を目指す少女小淵沢報瀬と出会う。高校生が南極になんて行けるわけがないと言われても、絶対にあきらめようとしない報瀬の姿に心を動かされたキマリは、報瀬と共に南極を目指すことを誓うのだが……。</p>
		</div>
	</div>
	～ 略 ～
</div>

.list_itemに対してdisplay: flex;を指定して、.list_imageと.list_textを左右に並べます。
CSSは必要な部分のみ抜粋していますので、詳細はデモページでご確認ください。

CSS

.list_item {
	display: flex;
}
.list_image {
	background: #E74C3C;
}
.list_text {
	background: #3498DB;
}

これで高さを揃えた状態で並べることができました。
左右並び+高さ揃えのデモページ
　

これにプラスして画像とテキストを上下中央に配置したいので、align-items: center;を指定します。

CSS

.list_item {
	display: flex;
	align-items: center;
}

背景色がない場合は.list_itemに指定でよいのですが、背景色がある場合は高さが揃わなくなります。
高さ揃え+上下中央配置がうまくいかない場合のデモページ
　

対応方法としては、子要素の.list_imageと.list_textに対してdisplay: flex;とalign-items: center;を指定します。
そのまま指定すると.list_textの子要素の.list_ttlと.list_descriptionが横並びになってしまうので、divの入れ子を一つ追加します。

HTML

<div class="list">
	<div class="list_item">
		<div class="list_image">
			<img src="../01.jpg" alt="" />
		</div>
		<div class="list_text">
			<div class="list_text-inner">
				<p class="list_ttl"><a href="http://yorimoi.com/" target="_blank">宇宙よりも遠い場所</a></p>
				<p class="list_description">何かを始めたいと思いながら、中々一歩を踏み出すことのできないまま高校2年生になってしまった少女・玉木マリことキマリは、とあることをきっかけに南極を目指す少女小淵沢報瀬と出会う。高校生が南極になんて行けるわけがないと言われても、絶対にあきらめようとしない報瀬の姿に心を動かされたキマリは、報瀬と共に南極を目指すことを誓うのだが……。</p>
			</div>
		</div>
	</div>
	～ 略 ～
</div>

この状態で、.list_imageと.list_textに対してdisplay: flex;とalign-items: center;を指定します。

CSS

.list_image {
	display: flex;
	align-items: center;
	background: #E74C3C;
}
.list_text {
	display: flex;
	align-items: center;
	background: #3498DB;
}

これで高さ揃え+内容を上下中央揃えにすることができました。
高さ揃え+上下中央配置のデモページ