自分用 css のレイアウト決定のフローチャート

Published at: 2021/05/15

  1. 縦に並べたい: box
  2. 文章や段落を良い感じに並べたい: box + inline + float
    • 特に、 inline block はこのレイアウトに属し、文章や段落の規定(e.g. whitespace, line break)の影響をもろにうける。 やりたいことが文章や段落でなければ、このレイアウトは利用しない方が良い。
  3. inline 要素たちを言い感じにカラム化したい: multi column
  4. box & inline flow っぽく、ただし文章以外、つまりは box に対してこれを適用したい: flexbox
  5. excel/table っぽくレイアウトしたい: grid
  6. 良い感じに column base だったりレスポンシブだったりを利用して全体のレイアウトを決めたい: e.g. bootstrap

tags: cssbootstrap