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 ; ” が設定されています。）
上下揃えをする事ががインライン要素の時ぐらいしか無いので、気づくのに時間がかかってしまいました。
（左右揃えだったらすぐに気づくんですが・・・）
コメント