【CSS】いま一度Flexboxを見直す【レイアウト】

最近Twitterで「要素を横並びにするやり方」について悩んでいるツイートを見たので、自分もなんとなく使っていたFlexboxについて見直すことにしました。

「Flexboxはなんとなく知ってる」
「align-itemsとjustify-contentしか使ったことない」
「横並びはfloat使ってますが？」
「そもそも要素の横並びができない！」

という疑問を解決できると思うので是非最後まで読んでください。

Flexboxとは
親要素（Flexコンテナー）に指定するプロパティ
子要素（Flexアイテム）に指定するプロパティ
- order
- flex-grow
- flex-shrink
- flex-basis
- align-self

Flexboxとは

FlexboxとはCSSレイアウトの一つです。
ボックスを横並びにするのはもちろん、縦並びや順番の入れ替えなどカンタンなコードで色々なことができます。

FlexboxのCSSプロパティは親要素（Flexコンテナー）に指定するものと子要素（Flexアイテム）に指定するものに分けられます。

※2020年2月現在のサポート状況はこちら
Can I use... Support tables for HTML5, CSS3, etc

今回サンプルで使用するHTMLはこちらになります。

<div id="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>

親要素（Flexコンテナー）に指定するプロパティ

display: flex;

この指定は必須です。（インライン要素に指定するときはinline-flex）
親要素はFlexコンテナー、子要素はFlexアイテムになります。
親要素にdisplay: flex;を指定することで子要素は横並びになります。

flex-direction

flex-directionは子要素の並ぶ向きを指定します。

row（初期値）… 左から右へ
row-reverse … 右から左
column … 上から下
column-reverse … 下から上

flex-wrap

flex-wrapは子要素の折返しを指定します。

nowrap（初期値）… 折り返さない
wrap … 折り返す
wrap-reverse … 折り返して順番を逆にする

justify-content

justify-contentは子要素の水平位置を揃えます。

flex-start（初期値）… 親要素の一番上に揃える
flex-end … 親要素の一番下に揃える
center … 親要素の水平中央に揃える
space-between … 親要素の上下を空けずに等間隔で揃える
space-around … 親要素の上下を空けて等間隔で揃える

align-items

align-itemsは子要素の垂直位置を揃えます。

stretch（初期値）… 親要素いっぱいに広げて揃える
flex-start … 親要素の一番上に揃える
flex-end … 親要素の一番下に揃える
center … 親要素の上下中央に揃える
baseline … ベースラインに沿って揃える

★小ワザ
親要素の中に子要素を天地中央に配置するというのはよくあります。
水平の中央揃えはtext-align: center;で難しくはないですが、天地の中央揃えは結構大変だと思います。

私もpaddingやpositionで揃えることが多かったのですが、レスポンシブへの対応の問題とコードの保守性がよくないと思っていました。
Flexboxのjustify-conetnt: center;とalign-items: center;で超カンタンに天地中央揃えができます！

下にサンプルコードを載せておきます。

See the Pen
justify-content, align-items by piko525 (@piko525)
on CodePen.