flexboxについてのメモ

毎回chromeのdevtoolsで期待した見た目になるように試行錯誤しつつプロパティ設定していて時間を取られていたので、調べてメモ書きしておく。主軸の概念とか知らなかったので想定より勉強になった(知識が穴だらけで悲しい)。

参考

これを読んでおけばOK。

developer.mozilla.org

プロパティについて

• flex-direction…主軸の向きと方向を指定
  • flex-direction: row:の場合、主軸は水平(→)
  • flex-direction: column:の場合、主軸は垂直(↓)
• justify-content…主軸に沿った向きのレイアウトを指定
• align-items…主軸に直行した向きのレイアウトを指定