デモページはこちら

CSSのflexbox使用時の注意点をまとめました。flexboxは使い方によってレイアウトに表示崩れが発生するパターンがあります。

flexアイテムにimgタグ等のinline要素が含まれる場合、他のflexアイテムの縦幅が大きいと同じ高さまで引き延ばされてしまいます。これはalign-itemsプロパティの初期値がnormalのため、一番縦幅の大きいflexアイテムに高さを揃えるデフォルトの仕様です。これを解決するには以下の方法があります。

・親要素のflexコンテナのalign-itemsプロパティに初期値のnormal以外（flex-start等）を指定する。
・flexアイテムのinline要素をblock要素で囲む

<p class="flex_title">align-itemsプロパティなし：初期値のnormal</p>
<div class="flex_wrap">
	<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	<img src="images/logo_bp.gif" alt="Brick Plan" class="logo">
</div>
<p class="flex_title">align-itemsプロパティあり（flex-start）</p>
<div class="flex_wrap flex_start">
	<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	<img src="images/logo_bp.gif" alt="Brick Plan" class="logo">
</div>
<p class="flex_title">imgタグをdivタグで囲う（align-itemsプロパティなし：初期値のnormal）</p>
<div class="flex_wrap">
	<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	<div><img src="images/logo_bp.gif" alt="Brick Plan"></div>
</div>

.flex_wrap {
	display: flex;
	justify-content: space-between;
}
.flex_start {
	align-items: flex-start;
}
.flex_wrap p {
	width: 77%;
	max-width: 539px;
	margin: 0 20px 0 0;
	padding: 0;
}
.flex_wrap img.logo {
	width: 23%;
	max-width: 141px;
}
.flex_wrap div {
	width: 23%;
	max-width: 141px;
}