displayの使い分け

displayの種類（よく使いそうなものだけ）

• block　→　横一杯に広がる要素
  • width/heightの設定可能
  • margin/paddingの設定可能
  • 縦並び（横幅は親要素いっぱいに広がる）
• inline　→　中身に合わせた大きさの要素
  • width/heightの設定不可
  • margin/paddingの設定左右のみ可能
  • 横並び
• inline-block　→　自由にサイズを変えられる要素
  • width/heightの設定可能
  • margin/paddingの設定可能
  • 横並び
• table
  • HTMLの<table>タグと同じ
    table表示にしたい全体を要素をdisplay:table;
    tableのtdにしたい要素をdisplay:table-cell;にする
• flex　→　要素を並べたいときに大活躍　万能？
  • 並べたい要素があるときそれらを包括する要素（親要素）に指定する
  • 横並び、縦並び、並べる順番、並べ方、自動折り返しの有無なんでもある
    これがあれば大抵何とかなる（いまのところ）
• grid　→　要素を格子状に並べるもの
  • 並べたい要素があるときそれらを包括する要素（親要素）に指定する
  • 縦横に同じサイズの領域をいくつずつ並べるか指定できる