CSS | display:flexで画像の回り込みをする方法

2021-05-09CSS フレックスボックス,CSS

CSSのflexbox（display:flex）を使って画像の回り込みを実装する方法を紹介しています。

See the Pen CSS flexbox gap by yochans (@yochans) on CodePen.

flexboxで画像の回り込み

flexboxで画像の回り込みをするのは単純にdisplay: flexを指定するだけで実装可能です。

<div id="container">
	<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" width="250px" />
	<p>Text next to the image in flexbox</p>
</div>

flexboxは直の子要素に対して反映されますので、必要がない限りdivに揃えなくても問題ありません。
サンプルでは、imgタグとpタグで実装しています。

画像の下の余白部分のズレを解消する為にimgタグにvertical-align: topを指定します。

テキストが左上からの描画であれば、位置指定は不要です。

#container {
	display: flex; /* flexbox */
	gap: 0 20px; /* 余白 */
	background: #faebd7;
	padding: 10px;
}

#container img{
	vertical-align: top; /* 画像下の余白消し */
}

テキスト部分の高さを中央にする

テキスト部分の高さを中央揃えにする場合は、pタグにもdisplay: flexを指定して、align-items: centerにします。

#container {
	display: flex; /* flexbox */
	gap: 0 20px; /* 余白 */
	background: #faebd7;
	padding: 10px;
}

#container img{
	vertical-align: top; /* 画像下の余白消し */
}

#container p {
	display: flex;
	align-items: center;
}

テキスト部分を縦横中央揃えにする

テキスト部分を縦横中央揃えにする場合は、display: flex指定とalign-items: center（縦）、一緒にjustify-content: center（横）も追加します。

そのままでは横幅のサイズは指定されておらずテキストのサイズになっていますので、flex-grow: 1で親要素の残りサイズとなる可変サイズに変更します。
※こちらは親要素で指定したdisplay: flexに対する指定です

#container {
	display: flex; /* flexbox */
	gap: 0 20px; /* 余白 */
	background: #faebd7;
	padding: 10px;
}

#container img{
	vertical-align: top; /* 画像下の余白消し */
}

#container p {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}