【CSS】flexboxの上下揃え(align-items)の設定が効かない

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

Flexboxで子要素の上下揃えが効かない!って時ないですか?

Flexboxで子要素の上下揃えをしたいときは、下記のように “ align-items ” で設定します。

上記のみで上手く上下揃いができない場合、” margin ”の設定が原因の場合があります。

align-items:center で、中央寄せにしたい場合、子要素の上下のmarginをauto にする必要があります。

逆に、上下どちらかに寄せたい場合は、寄せたい方のmarginを「0」にする必要があります。

私の場合、CSSのリセット設定で、“*{ margin:0; } ”とリセットしていますが、”div”と”table”は ” margin : auto ; ” の設定しているので、少しハマってしましました。
(HTML5のリセットでもよく”div”と”table”の ” margin : auto ; ” が設定されています。)

上下揃えをする事ががインライン要素の時ぐらいしか無いので、気づくのに時間がかかってしまいました。
(左右揃えだったらすぐに気づくんですが・・・)

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次