2016年12月29日(木)

flexboxを使ったレイアウト方法まとめ

• 0
• 1
• 21
• 31

display:flex;を使ったレイアウト方法をまとめました。
上下左右のレイアウトに柔軟に対応できるので、レスポンシブやグリットレイアウトに役立ちます。

flexboxで上下左右中央寄せ

See the Pen flexboxで上下中央寄せ by ponzu (@ponzu) on CodePen.

align-items: center; 上下中央寄せ justify-content: center; 左右中央寄せ .wrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; ...