【初心者向け!】Flexboxレイアウトをおぼえよう!!《前半》

こんにちは。デザイナーの佐竹です。

今回はレイアウトの新しい技術である、Flexboxについてご紹介します。
Flexboxとは、「Flexible Box Layout Module」のことをいいます。
少し前まで、仕様変更が多かったり、実用は難しかったのですが、最近では安心して使える機能になってきています。
BootstrapやIonic2など、様々なフレームワークのUIで採用されています。

css3のレイアウト機能で、以前はfloatをつかって実現していたレイアウトを、より簡潔に記述できるようになっています。
気を付けなければならない点としては、ブラウザーごとに適切な設定が必要で、現状ではIE10以前のバーションには非対応なため、主要ブラウザーはカバーしているものの、シェアの低いブラウザーなどには対応できません。

ボックス要素を横並びにしたり、左右よせ、中央寄せなど、様々なレイアウトを簡素なコードで実現できます。
具体的には「Flex コンテナ」と、「Flexアイテム」という2つの要素でレイアウトしていきます。

Flexコンテナとは

Flexコンテナとは、Flexアイテムの親要素です。このFlexコンテナの中にFlexアイテムを配置することでレイアウトを構築していきます。

Flexアイテムとは

Flexアイテムとは、Flexコンテナの中に配置される要素で、Flexコンテナの子要素です。Flexアイテムは、Flexコンテナの中で主軸と交差軸という2つの軸を基に配置します。

次回は、具体的な使用方法をご紹介します!