2020.10.10

HTML・CSS

CSSのflexbox使用時の注意点

デモページはこちら

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;
}

関連記事

2022.05.11

HTML・CSS

CSSのcalc記述時の注意点

CSSのcalcはCSS3で追加された関数です。calc記述時は以下の点に注意が必要です。 加算・減算の演算子の左右には半角スペースが必要 乗算は掛けられる方(…

2022.05.12

HTML・CSS

asideタグの使い方

asideタグはメインコンテンツの内容と関連はしているが、メインコンテンツではない補足情報を表します。主に「バナー広告」「関連記事」「サイドバー」「モーダルコン…

2020.08.30

HTML・CSS

Font Awesomeの使い方

Font Awesomeの公式サイトで使用したいアイコンフォントを選びます。Iconsのページでアイコンフォントの一覧が確認できます。有料版と無料版があり有料版…

2025.07.01

HTML・CSS

mask-imageを利用したグラデーションの点線

CSSのmask-imageプロパティを利用して、グラデーションの点線を作成します。デモページはこちら グラデーションの点線は疑似要素にmask-imageプロ…

2022.08.30

HTML・CSS

linear-gradientを利用した文字の下線

background-imageプロパティのlinear-gradientを利用して複数行の文字に下線を引きます。複数行に対応させるため、inline要素に適用…

上に戻る