HTMLとCSSを使ったレイアウトの方法にはいくつか種類があります。
以前はfloatをつかった方法が主流でしたが、最近では今回ご紹介するフレックスボックスかグリッドレイアウトが使われることが多いようです。
ということで今回は、フレックスボックスによるレイアウトを簡単な例を使って解説してみたいと思います。
フレックスボックスの特徴と使い方について
flexboxをしていない状態
See the Pen
flex box1 by taichi (@taichi_na)
on CodePen.
(※HTML、CSS、RESULTのボタンを押すと表示が切り替わります。)
上のコードは<p>要素を4つ並べただけのものです。
それぞれに大きさを指定して、ボーダーも表示しわかりやすくしてあります。
上の例のようにブロック要素は通常、改行されて縦に並びます。
ブロック要素とインライン要素の違いについては以下の記事も参考にしてください。
以下でやっていきますがフレックスボックスが効いた状態だと横並びになります。
実際に flexbox を指定してみる
See the Pen
flexbox2 by taichi (@taichi_na)
on CodePen.
(※HTML、CSS、RESULTのボタンを押すと表示が切り替わります。)
各ボックス(4つの<p>要素)にflexを効かせるためには、一つ上の要素（親要素）にたいして、
display: flex;
と記述をする必要があります。
上の例では、4つある<p>要素をフレックスボックスを使ってレイアウトをしたいので、一つ上に<div>を作ってそれで囲みました。
こうすることによって、<div>内にある要素は、フレックスボックスで配置されることになります。
今回のケースのように、並べた要素に対して親要素がない場合には、<div>で囲んであげる必要があります。装飾目的だけに<div>を使うというわけです。
【justify-content】主軸方向の配置を変更する
justify-content: flex-end
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
画面の右端にすべて寄ります。メニューバーなどに使えますね。
justify-content: center
See the Pen
center by taichi (@taichi_na)
on CodePen.
今度は画面の中央に寄りました。
あくまでも画面に対してなので、見ているデバイスが変わっても必ず中央に寄ってくれます。
justify-content: space-around
See the Pen
around by taichi (@taichi_na)
on CodePen.
均等に配置されました。両サイドにもスペースがありますね。
justify-content: space-between
See the Pen
between by taichi (@taichi_na)
on CodePen.
均等配置ですが今度は両サイドにスペースがありません。
まとめ：フレックスボックス化と主軸方向の配置
今回はフレックスボックスの表示方法と、主軸方向の配置変更について触れました。
次回は主軸の方向を変える方法についてお話する予定です。
主軸を変えるとそれに伴って、justify-content が有効になる方向も変わるということを忘れないようにしましょう。
縦でも横でも、主軸はあくまでも主軸のままというわけです。
この部分がフレックスボックスによるレイアウトでは少し混乱してしまう部分ですので、紙に書いたり、実際にブラウザで表示させる際には、ボーダーを表示させるなどしてその動きをそのたびに確認することをお勧めします。
私は必ずボーダーを表示させて確認するようにしています。
