はじめに
ここ最近バックエンドばかりやっていたらHTML、CSSの基礎知識がすっかり抜け落ちていたのでこの機会に復習がてらレイアウトの基礎を備忘録としてまとめることにしました。
内容としては下記３点を中心にまとめています。
①ブロック要素とインライン要素の違い
②左右、上下の中央揃えのやり方
③レイアウトを組む上でのコツ
ブロック要素・インライン要素
まず、HTMLの要素は大きく分けて2種類存在する。
ブロック要素、インライン要素だ。
※インラインブロックの存在は一旦忘れてくれ。
まずは両者の性質の違いをしっかりと理解をしてほしい。
ブロック要素
例：div
特徴：横幅いっぱいに広がる。縦並び（改行される）
例えば下記のように書いた時は
<div>
１行目
</div>
<div>
2行目
</div>
このような出力結果になる
1行目
2行目
インライン要素
例：p , span
特徴：文字のサイズ分しか横幅が広がらない。横並び（改行されない）
width・heightの指定が出来ない。
例えば下記のように書いた時は
<p>
１行目
</p>
<p>
2行目
</p>
このような出力結果になる
1行目2行目
※ブラウザのデフォルトCSS（user agent stylesheet）でdisplay:blockの指定がされている場合は当然ブロック要素のように横幅いっぱいになるので注意。
そのままinline要素として使いたいなら、リセットCSSを使うなり、display:inlineを指定して上書きしようね！
左右、上下の中央揃えのやり方
左右中央揃え
親要素にtext-align:center;
小要素が左右中央揃えになる（インライン要素、ブロック要素ともに）また、ブロック要素の中身も左右中央揃えになる。
対象の要素にmargin: 0 auto;
widthが設定されていないと適用されない。
つまりブロック要素にしか適用されない。
上下中央揃え
親要素に display: flex; align-items: center;
小要素が上下左右中央揃えになる（インライン要素、ブロック要素ともに）
上下左右中央揃え
親要素に display: flex; justify-content: center; align-items: center;
小要素が上下左右中央揃えになるインライン要素、ブロック要素ともに）
※他にもやり方はあるが、使用頻度が特に高いものだけ書いてます。
レイアウトを組む上でのコツ
とりあえずdivは止めよう
文字ならなるべくpタグやspanタグを使おう。
確かにdivだけでも書けるけどdivタグばかりだと可読性が落ちる。
親要素の余白(padding)を設定してから子の余白(margin)を設定
・親要素と小要素の間（親子間）の余白はpadding
・隣りあった要素（兄弟間）の余白はmargin
・上下に隣りあった要素の場合はmargin-top
・左右に隣り合った要素の場合はmargin-left
といった具合にpaddingやmarginのルールを決めておくとコーディング時に迷わないし、
保守性が高まる。
width,heightを無闇に使うな
それpaddingで表現出来ないかな？
もちろん禁止でな無いけどなるべく控えよう。
小ワザ
インライン要素を縦に並べたい時
flex-direction: columnを使おう！
divなど安易にブロック要素に頼るな！
いい感じに要素の感覚を空けたい時
justify-content: space-around
justify-content: space-between
でいい感じにできるよ。
imgタグを使うなら・・・
基本的にdivタグで囲いな！使わないとflex使った時に崩れがちだから!
フレックスボックスの中で特定の要素だけを右に寄せたい時
対象の要素にmargin-left: auto;