Chapter 02

Flexboxとは?

Arisa Fukuzaki
Arisa Fukuzaki
2020.10.11に更新
このチャプターの目次

Flexboxも、要素の並列を行うための技法です。

ただ、要素を並列させる方法が、マークアップ言語シリーズ: Lesson 3 並列、floatで学習したfloatは、要素を浮動させることによって行ったのに対し、Flexboxでは、要素は浮動しません。

Flexboxでは、より複雑なレイアウトのデザインを行うため、様々なレイアウトを簡単にしてくれるよう改良が重ねられてできました。

ブラウザ対応

以前はブラウザによっては、Flexboxが対応していないブラウザがあったことから、ブラウザ対応をチェックしてFlexboxのレイアウトを実装する必要がありました。

しかし、2015年頃から、Flexboxに完全対応していなかった古いInternet Explorer(IE)のサポートが終了したり、Flexboxも構文が改良されたりしたため、最近ではFlexboxを使うことを推奨しています。

IEやOperaというブラウザの古いバージョンを除いては、使えるブラウザがほとんどです。

以下のソースより、各ブラウザでFlexboxだけでなく、様々な技法が使用可能かどうかをチェックすることができます。

CSS以外の技法にも使用できますので、今後、比較的リリースされてまもない、新しい技法を使用する場合は、以下の「Can I Use...?」でチェックしてから使用すると良いでしょう。

Flexbox 対応ブラウザ一覧: 「Can I Use...?」