flex-box よく使うやつ React

レイアウト

Appコンポーネントの中に、
Header、Main、FooterBarが含まれている状態

構成

App
  Header
  Main
  FooterBar

# App
display: flex;

# Header
flex: 1;

# Main
flex: 8;

# FooterBar
flex: 1;

アイテムの整列

# ItemList
display: flex;
 justify-content: space-around;

ItemList
  Item
  Item
  Item
  Item