はじめに

Internet Explorerのサポートポリシーが変更になったおかけで、(新規にサイトを作成する場合は)IE11より前のIEのサポートを取りやめるという判断をすることも現実的になってきました。

「IE11より前はサポートしない」というポリシーで受けられる恩恵は色々あると思いますが、その中の一つとして「flexboxの使用」が挙げられます。

「flexboxとはどんなものなのか？」ということについては以下の資料を見るとどんなものなのか大体の所が分かるでしょう。簡単に言えば「ページのレイアウトを簡単にできるようにしてくれるもの」です。

5分で分るflexbox from Azusa Tomita

caniuse.comのflexboxの項目を見てもらえれば分かるとおり、IE10以前を切り捨てることができるならflexboxの使用も現実的な範囲に収まっていることが分かります。
(Android 2.xとかAndroid標準ブラウザ？知らない子ですね)

使い始める際に参考にした記事・資料のまとめとそれに対するコメント

私は現在、会社のサイトを業務で作っているのですが、その際flexboxを全面的に使用して今作っています。

サイトを作り始める前から少しずつflexboxの勉強はしていたのですが、初めて業務で本格的にflexboxを使用したため、色々わからないことがありました。それで実際に困った際に参照したWeb上の記事・資料を以下にまとめます。

Flexboxについて勉強したい・理解を深めたい時に参考になるエントリーやサイトまとめ

いきなりまとめ記事ですが、正直なことを言ってしまえば上記記事内で紹介されている記事・資料を全て読み通せばflexboxをかなり使いこなせるようになります。

その中でも特に以下に紹介する記事・資料をよく見直しました。

Test CSS Flexbox Rules Live

いわゆるplayground的なもので、flexboxに関わるプロパティの値を変えたらどうなるのかが自分でいじりながら分かります。おすすめ。

FLEXBOX FROGGY

これはゲーム感覚でflexboxのレイアウトが学べるサイトです。指定された色のところに同じ色の蛙を配置するようにするゲーム。ここで使われているプロパティを知るだけでも全然違います。

CSS flexible box の利用

正確なことを知りたい場合はMDNを参照するといいと思います。メイン軸(main axis)とクロス軸(cross axis)の理解はflexboxを使って思い通りのレイアウトを組む場合には必須です。

これだけ知っておくだけでも十分活用できる知識

flexboxに関連するCSSのプロパティはたくさんあって、私も全部は把握しているわけではありませんが、一部だけ知っているだけでも十分にサイトのレイアウトに活用できます。ここではそういったプロパティや知識を軽く紹介します。

Flex container の子要素が Flex item になる

関係するのはdisplayプロパティで、下のようにdisplayプロパティの値をflexにしてやると、指定した要素がFlex containerというものになり、その子要素がFlex itemというものになります。

sample.html

<div style="display: flex">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

この状態だと3つのdivがFlex itemになっており、デフォルトだと後で説明するメイン軸が横方向に設定されているので、これら3つのFlex itemが横並びになるはずです。

メイン軸(main axis)とクロス軸(cross axis)

Test CSS Flexbox Rules Liveなどでflex-directionやjustify-contentやalign-itemsの値を変更するとFlex itemとなっている要素の並びが変更できるのがわかるかと思いますが、この時メイン軸とクロス軸の理解をした上でやっていないと横並びの設定をしたいのになぜか縦並びの設定になってしまったなど、思った通りにレイアウトできない状態に陥ります。

特にflex-directionにcolumnを指定して縦方向にレイアウトしようとする時によく間違えました。

詳しくはMDNのflexboxの記事を見ると書いてありますが、簡単に説明するとflex-directionプロパティでメイン軸というものが設定されて、その「メイン軸に沿ってレイアウトする設定のプロパティ」と「メイン軸と垂直な軸であるクロス軸に沿ってレイアウトするプロパティ」が分かれています。

具体的な例として挙げられるのが、justify-contentプロパティがメイン軸に、align-itemsやalign-selfがクロス軸に沿ってレイアウトするプロパティです。

デフォルトではflex-directionの値はrowに指定されているので、メイン軸が横方向に設定されています。そのため、デフォルトだとjustify-contentは横方向(=デフォルトの状態のメイン軸)の、align-itemsは縦方向(=デフォルトの状態のクロス軸)のレイアウトになっています。

これがflex-directionをcolumnにするなどしてメイン軸が縦方向に設定された場合、justify-contentは縦方向の、align-itemsは横方向のレイアウトをするようになります。

「justify-contentは横方向のレイアウトをするものだ」と間違って理解すると複雑な段組をしようとした時にあっという間に破綻するので、メイン軸とクロス軸の理解はしておいたほうがいいでしょう。

私も学び始めてそれほど時間が経っていないので、間違っている箇所などあったらコメントなどで指摘お願いします！

flexboxを使い始める際に学んだ資料・知識を自分なりにまとめてみた