Material-UI レイアウト部品整理

各部品のデフォルト動きの個人的メモ

Box

- divタグ相当

Container

- 水平方向の中央揃えされたdivタグ相当
- maxWidthで横幅指定(falseで指定なし)

Grid

- 12列のグリッドレイアウト
- containerとitemの2種類
- itemの幅はパーセンテージで変動
- spacingで余白を指定(1で8px)
- direction、justify、alignItemsで方向、横の並び、縦の並びを指定
- containerはネストできる

ブレークポイント

- xs 0px
- sm 600px
- md 960px
- lg 1280px
- xl 1920px

この記事が気に入ったらサポートをしてみませんか?