flexboxを入れ子で使う

flexboxを入れ子で使えることを知らなかったので、実際に試してみました。

サンプルコード

HTML

<div class="block">
	<div class="block-image">
		<img src="http://placehold.it/200x150" alt="" />
	</div>
	<div class="block-text">
		<p>テキストテキストテキストテキスト</p>
	</div>
</div>

CSS

.block {
	display: flex;
}
.block-image {
	width: 200px;
}
.block-text {
	flex-grow: 1;
	display: flex;
	align-items: center;
	background: #eeeeee;
}

.blockと.block-textに対してdisplay: flex;を指定して、.block-textのalign-items: center;で子要素が上下中央一に来るようにしています。
flexboxを入れ子にするデモページ
このサンプルの場合はdisplay: table; と display: table-cell;を使ったのでも実装できそうですが、もっと複雑なレイアウトだったりした場合には覚えておくと便利かもしれません。