FlexBoxとは

display:flexのようにCSSのdisplayプロパティにflexを指定すると利用できる新しいボックスです。名前の通り、フレキシブルにレイアウトを組むことができるように設計されたプロパティです。
普段のWEB制作のみならず、React nativeでレイアウトを作成する際には必須の知識になります。

カラムレイアウトの歴史

2000年頃まではカラムレイアウトを行う場合にはtable要素を使用していました。例えば、以下のようなサイトです。

ゼルダの伝説 時のオカリナ
(※リンク先から、右クリック→要素の検証 からソースコードを見てね)

ここから少し時代が進むと、CSSのfloatプロパティが登場し、floatによる2カラムや3カラムのレイアウトはWeb制作のテクニックとして、かなり普及しました。

しかし、floatが導入された本来の目的は「テキストブロック内に浮動画像を入れること」です。これは新聞のレイアウトを想像していただくと分かりやすいと思います。新聞のレイアウトでは、画像があると文字がそれを避けるように配置されます。本来はこのようなレイアウトのために用意されたプロパティなのです。

そして、またしばらく時間が経ち、2014年頃からdisplay: flexプロパティが各ブラウザで利用可能になりました。2020年現在ではdisplay: flexを導入する障壁は全くありませんので、是非とも導入をしていきたいレイアウト方法です。

今回のソースコード

私の環境では、以下のようにHTMLとCSSを記述しています。コピペで動くので、是非試してみてください。

HTML

<!DOCTYPE html>
<html lang=ja dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>flexbox</title>
  </head>
  <body>
    <ul>
      <li>No.1</li>
      <li>No.2</li>
      <li>No.3</li>
      <li>No.4</li>
      <li>No.5</li>
      <li>No.6</li>
      <li>No.7</li>
      <li>No.8</li>
      <li>No.9</li>
    </ul>
  </body>
</html>

CSS

li {
  border: 1px solid black;
  margin: 5px;
  list-style: none;
  padding: 0 6px;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
}

display

display:flex;を指定するとFlexBoxによるレイアウトを宣言することができます。

flex-direction

flex-directionプロパティはボックスを並べる方向を指定することができます。
rowcolumnが指定でき、デフォルト値はrowです。

row
flex-direction-row

column
flex-direction-column

flex-wrap

flex-wrapプロパティは画面幅にボックスが収まりきらなかったときに折り返しを指定することができます。no-wrapwrapが指定でき、デフォルト値はno-wrapです。

今回はflex-direction: row;を設定しています。

no-wrap
flex-wrap-no-wrap

wrap
flex-wrap-wrap

justify-content

justify-contentプロパティはボックスの水平方向の配置方法を指定することができます。
flex-startflex-endcenterspace-betweenspace-aroundを指定することができ、デフォルト値はflex-startです。

今回はflex-direction: row;flex-wrap: wrap;を設定しています。

flex-start
justify-content-flex-start

flex-end
justify-content-flex-end

center
justify-content-center

space-between
justify-content-space-between

space-around
justify-content-space-around

align-items

align-itemsプロパティはボックスの垂直方向の配置方法を指定することができます。
stretchflex-startflex-endcenterを指定することができ、デフォルト値はstretchです。

今回はflex-direction: column;flex-wrap: wrap;justify-content: flex-start;を設定しています。

stretch
align-items-stretch

flex-start
align-items-flex-start

flex-end
align-items-flex-end

center
align-items-center

最後に

この記事では紹介しきれなかったFlexBoxのプロパティがいくつかあるので、以下にまとめました。より高度なレイアウトを行う場合はこちらも試してみてください。

プロパティ 解説
alignSelf 親コンポーネントで指定した「alignItems」を子コンポーネントで上書きする。指定できる値はalignItemsと同じ。
flex flexプロパティーは、flex-grow、flex-shrink、flex-basisという3つのプロパティーのショートハンド。flex-glowの機能として利用する場合、2つ以上のブロックに対してflex: 1と書けば、ブロックの比率を1:1に決めることができる。もちろん、片方だけのブロックにflex:2を指定した場合、ブロックの比率は2:1になる。
flex-flow flex-flowプロパティは、flex-directionとflex-wrapのショートハンド。
order orderプロパティは、フレックスコンテナ内のアイテムの表示順序を指定する際に使用します。

参考
CSS Flexible Box Layout Module Level 1
ReactNative Flexboxまとめ(殴り書き) - 女子高生になりたい
これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス