Flexboxで子要素の上下揃えをしたいときは、下記のように “ align-items ” で設定します。
1 2 3 4 5 6 7 8 9 |
.flexbox{ display: flex; align-items:flex-start; /*上揃えの場合(デフォルト)*/ align-items: center; /*中央揃えの場合*/ align-items:flex-end; /*下揃えの場合*/ } |
上記のみで上手く上下揃いができない場合、” margin ”の設定が原因の場合があります。
これは左右揃えの時も同じですが、” margin : auto ; ” を指定していると上手く設定できません。
ですので、子要素側に” margin ”を設定します。
1 2 3 4 5 |
/*(子要素)*/ .flexbox .sub{ margin-top :0; /*上揃えなら*/ margin-bottom :0; /*下揃えなら*/ } |
当たり前の設定で、上下揃えをする事ががインライン要素の時ぐらいしか無いので、気づくのに時間がかかってしまいました。
(左右揃えだったらすぐに気づくんですが・・・)
僕は、CSSのリセット設定で、“*{ margin:0; } ”とリセットしていますが、”div”と”table”は ” margin : auto ; ” の設定していたのが、原因でした。
他にも、HTML5のリセットでもよく”div”と”table”の ” margin : auto ; ” が設定されています。