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プロパティはボックスを並べる方向を指定することができます。rowやcolumnが指定でき、デフォルト値はrowです。
row
column
flex-wrap
flex-wrapプロパティは画面幅にボックスが収まりきらなかったときに折り返しを指定することができます。no-wrapとwrapが指定でき、デフォルト値はno-wrapです。
今回はflex-direction: row;を設定しています。
no-wrap
wrap
justify-content
justify-contentプロパティはボックスの水平方向の配置方法を指定することができます。flex-start、flex-end、center、space-between、space-aroundを指定することができ、デフォルト値はflex-startです。
今回はflex-direction: row;とflex-wrap: wrap;を設定しています。
flex-start
flex-end
center
space-between
space-around
align-items
align-itemsプロパティはボックスの垂直方向の配置方法を指定することができます。stretch、flex-start、flex-end、centerを指定することができ、デフォルト値はstretchです。
今回はflex-direction: column;とflex-wrap: wrap;とjustify-content: flex-start;を設定しています。
stretch
flex-start
flex-end
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クリエイターボックス