Flexboxで子要素の上下揃えが効かない！って時ないですか？
Flexboxで子要素の上下揃えをしたいときは、下記のように “ align-items ” で設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.flexbox{ display: flex; align-items:flex-start; /*上揃えの場合（デフォルト）*/ align-items: center; /*中央揃えの場合*/ align-items:flex-end; /*下揃えの場合*/ } |
上記のみで上手く上下揃いができない場合、” margin ”の設定が原因の場合があります。
align-items:center で、中央寄せにしたい場合、子要素の上下のmarginをauto にする必要があります。
|
1 2 3 4 5 6 7 8 9 |
/*（子要素）*/ .flexbox .sub{ margin-top :auto; margin-bottom :auto; } |
逆に、上下どちらかに寄せたい場合は、寄せたい方のmarginを「0」にする必要があります。
|
1 2 3 4 5 6 7 8 9 |
/*（子要素）*/ .flexbox .sub{ margin-top :0; /*上揃えなら*/ margin-bottom :0; /*下揃えなら*/ } |
私の場合、CSSのリセット設定で、“*{ margin:0; } ”とリセットしていますが、”div”と”table”は ” margin : auto ; ” の設定しているので、少しハマってしましました。
（HTML5のリセットでもよく”div”と”table”の ” margin : auto ; ” が設定されています。）
上下揃えをする事ががインライン要素の時ぐらいしか無いので、気づくのに時間がかかってしまいました。
（左右揃えだったらすぐに気づくんですが・・・）
