ブロックチェーン・AI・システム開発の株式会社INDETAIL

floatはもう古い?Flexboxで作る簡単CSSレイアウト

2016.01.14
rockd

あけましておめでとうございます(もう遅い?)
rockdです。

突然ですが皆さん、CSSで横並びのレイアウトを作るときはどんな方法でやってますか?
ちょっと前だとfloatや、display:inline-block、display:tableなどを駆使した方法が思いつきますが、ここ最近ではFlexboxを使った新しいレイアウト方法が目につくようになってきました。

Flexbox自体は前からあり、仕様が色々と変わったりと不安定な時期が続いていましたが、それも最近やっと安定してきました。
IE以外のモダンブラウザでは対応が進んでいるので、実務でも使えるようになってきています。

今回はCSSのFlexboxでどういったことが出来るのかを説明していきたいと思います。

Flexboxとは

正しくは「CSS Flexible Box Layout Module」といいます。
CSS3から導入され、文字通り、フレキシブルにレイアウトを可能にするボックスです。
スペースの操作や、要素を上下左右に揃えるなど従来ではちょっと手間だったレイアウトもFlexboxを使うと簡単に配置することができます。

CSS Flexible Box Layout Module Level 1

対応ブラウザについて

現在(2016年1月)のブラウザでの対応状況は「Can I use」というページから確認可能です。
caniuse
http://caniuse.com/#search=flexbox

IE11以外のブラウザは問題なくサポートしています。

それではflexboxの使い方をさくっと説明していきます。

横並びレイアウトの作成

基本的な横並びのレイアウトを作成してみます。
まずは普通にlist要素を並べます。

ここから、横並びさせたい親要素(ここではul)に対して、diplay: flex;を適用します。

※画像イメージです。分かりやすくするため、親要素にボーダーを設定しています。
list_flex

たった一行です。
これだけで横並びにすることが出来ます。簡単ですね\(^o^)/

また、この状態だと幅が狭まった場合にfloatのように中身のブロックが折り返されることがないのですが、下記のflex-wrap: wrap;を追加することで親要素の幅に収まらない場合に折り返しさせることも可能です。

※画像イメージ
list_flex_wrap

表示位置を変更する

justify-contentプロパティを使うと、要素と要素の間や、表示位置をカスタマイズすることが出来ます。

右寄せ

※画像イメージ
list_flex_end

中央揃え

※画像イメージ
list_flex_center

可変幅の2カラムレイアウトの作成

右側が可変幅になっている2カラムのレイアウトをFlexboxで作成してみます。よくあるレイアウトです。
まずはHTMLを書きます。

カラムに関するスタイルを設定します。

この時点では下記の画像イメージのような感じになります。

2column

ここでFlexboxに関する設定を追記していきます。

更に子要素にあたるselctionに対して、固定にしたブロックに幅を設定し、可変したいブロックにはflex: 1;を設定します。

このflex: 1;というのは、Flexコンテナーの余白をどれぐらい埋めるかという指定(厳密に言うとflexというプロパティはショートハンドで、flex-grow: 1;の指定と同じ)で、今回はflexの指定をしているのが1つだけなので、余白を全て埋めるような動きをしてくれます。

結果は以下のイメージのような感じになります。

2column_flex

固定ブロックは100pxの固定幅になり、可変ブロック部分は親要素の幅に合わせて可変で表示させることが出来ました。
また、Flexboxの利点として、高さの異なるボックスが並んでも、自動的に一番長いボックスに合わせて高さをあわせてくれるので、余計なCSSを記述する必要がないのも嬉しいです。

他にも、Flexboxに関するプロパティなどは色々あるのですが、ここでは全てを紹介しません。
実際に自分自身の手で色々と触ってみることが一番Flexboxの動きを体感できるかと思います。

最後にFlexboxをブラウザ上で触って学ぶことが出来るサイトをいくつか紹介します。

Flexbox Froggy

ゲーム感覚でFlexboxを学べるサイトです。
flexbox_frog
Flexbox Froggy

Test CSS Flexbox Rules Live

プロパティを自分で切り替えて表示を確認できます。
Test CSS Flexbox Rules Live

まとめ

これからWebサイトを作成する場合、Flexboxを覚えておくと、かなり効率良くスピーディに作成できるのではないでしょうか。

CSSも新しいものがどんどん増えています。
今回紹介したFlexboxの他にも、Grid Layout Moduleというのも出てきていますが、こちらはIE/Edge以外はサポートしておらず、まだ先の未来のものとなりそうです。
CSS Grid Layout Module Level 1

まずは、Flexboxを使ったことがない方は、これを機に少しでもFlexboxを学んでみては如何でしょうか。

rockd

エンジニア。 最近はフロントエンドを担当することが多い。 たまにデザインをすることもある。 インドアな見た目とは裏腹に意外とアウトドア。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。