Flexboxで上下揃えができない

CSS CSS

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

.flexbox{

	display: flex;

	align-items:flex-start; /*上揃えの場合(デフォルト)*/
	align-items: center; /*中央揃えの場合*/
	align-items:flex-end; /*下揃えの場合*/

}
	

上記のみで上手く上下揃いができない場合、” margin ”の設定が原因の場合があります。
これは左右揃えの時も同じですが、” margin : auto ; ” を指定していると上手く設定できません。

ですので、子要素側に” margin  ”を設定します。

/*(子要素)*/
.flexbox .sub{
	margin-top :0; /*上揃えなら*/
	margin-bottom :0; /*下揃えなら*/
}


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

僕は、CSSのリセット設定で、“*{ margin:0; } ”とリセットしていますが、”div”と”table”は ” margin : auto ; ” の設定していたのが、原因でした。
他にも、HTML5のリセットでもよく”div”と”table”の ” margin : auto ; ” が設定されています。

 

コメント

タイトルとURLをコピーしました