CSS3
flexbox

floatより辛くない「flexbox」でざっくりレイアウト

More than 1 year has passed since last update.

Kobito.GfdGCw.png


3行で説明、flexboxとは

CSS3から導入された

いにしえのテーブルレイアウトやfloatに変わる

新しいレイアウト方法です。伸びたり並んだりする。


俺、flexboxのプロパティ何回ググるんだろう問題

flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。

具体的には、下記のようなことができれば十分なんです。


  • リキッド2カラムレイアウト

  • スティッキーフッタ(最下部に吸い付くフッタ)

この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。


覚えておくべき3つのプロパティ


  • display: flex

  • flex: 1

  • flex-direction: column

これだけでわりとこなせます。以下で、実例をもとに説明します。


2カラムレイアウト

Kobito.82rqsP.png

さて、よくある2カラムレイアウトです。

ではまず、幅を伸ばす要素伸ばさない要素の二つに分けて考えましょう。



  • 伸ばさない要素の方には普通にwidth: 300pxのように幅を指定します。


  • 幅を伸ばす要素の方にはflex: 1を指定します。

  • 上記二要素の親にはdisplay: flexを指定します。

add.png

flex: 1のように指定すると、余白を指定の割合で埋めようとします。例の場合は、flex指定した要素は一つだけですから、余白を100%埋めるように幅が伸びます。

DEMO

Source Code

<div class="container">

<div class="left">
<!-- 左カラム -->
</div>
<div class="contents">
<!-- 右カラム -->
</div>
</div>

.container{

display: flex;
}
.left{
width: 300px;
}
.contents{
flex: 1;
}

floatで実現するとなると、このコード量では済まないですね。


3カラムレイアウト

Kobito.3br9Go.png

これも2カラムとそんなに変わりません。固定する部分が二つに増えただけです。

やることは全く一緒です。繰り返しますが、


  • 固定の部分は幅指定

  • 伸ばす部分はflex: 1

  • 親要素には display: flex

ですね。

DEMO

Source Code

<div class="container">

<div class="left">
<!-- 左カラム -->
</div>
<div class="contents">
<!-- コンテンツ -->
</div>
<div class="right">
<!-- 右カラム -->
</div>
</div>

.container{

display: flex;
}
.left{
width: 300px;
}
.contents{
flex: 1;
}
.right{
width: 300px;
}


ヘッダ・フッタ(スティッキーフッタ)

Kobito.Ot1hp4.png

スティッキーフッタとは、平たく言うと、必ずページの末尾にひっついてくるフッタですね。

これ、結局、さっきの「3カラムレイアウト」を、90度回転させただけです。flexboxの要素の並べ方向を指定するプロパティが、flex-directionです。

ここでは縦に並べたいので、親にflex-direction : columnを指定します。

さらにもう一点。親要素は常に縦幅が画面サイズ以上になるようにします。min-height: 100vhを指定します。

※IEでは、height: 100%も同時に指定する必要があります。参考:Solved by flexboxのIssue

DEMO

Source Code

<div class="container">

<div class="header">
</div>
<div class="contents">
<!-- コンテンツ -->
</div>
<div class="footer">
</div>
</div>

.container{

min-height: 100vh;
display: flex;
flex-direction: column;
}
.header{
height: 100px;
}
.contents{
flex: 1;
}
.footer{
height: 100px;
}


合わせ技

Kobito.FpePjX.png

別名Holy-Grail layoutって呼ばれている気がします。

これも、結局「3カラムレイアウト」と「ヘッダ・フッタ」の組み合わせにすぎません。コードは省略します。

DEMO

Source Code


おわりです

Kobito.ZnF4F6.png

簡単でしたね。


サンプルのソースコード

Githubに置いておきました。

https://github.com/hashrock/flexbox-example/


補足


  • prefixなしだと動かないブラウザがありますので、必ずautoprefixer使ってください。2015/4/28現在だと、iOS SafariやIE10にベンダプレフィックスが必要です。


  • flexプロパティは、flex-basisflex-growflex-shrink プロパティをまとめたものです。今回はflex-grow: 1でもいいはずです。


雑感


  • やたらカードレイアウト絡みのサンプル多いけど、実務でカードレイアウトそんなに使うかな?

  • カードレイアウト使うのであれば、そもそもmaterializeみたいなCSSフレームワーク使った方が早いと思う。カードはドロップシャドウとか、カード内の画像レイアウトとか、ありもののスタイル使いたい場合多いし。

  • 大抵レイアウトで困るのは、sticky footerとかだし、大枠のレイアウトじゃないかな。

  • reverse系のプロパティ、一体誰が使うんだ・・・アラビア語圏とか?

  • でもfloatとか使ってカオスになるよりは、使えるなら早めに使って行った方がいいなぁ。

  • あんまりこれがベストって自信はないから、アドバイス等あればください。


関連資料


2015/11/03追記

上記Solved by flexboxですが、非常に良い資料でしたので、和訳を作成しました。こちらもよろしければご参照ください。

http://hashrock.github.io/solved-by-flexbox-ja/


2016/08/14追記

特にIE11で顕著ですが、flexboxはブラウザ実装にバグがあります。

このような問題は、flexbugsというリポジトリに集約されています。

https://github.com/philipwalton/flexbugs

このflexbugsを元に、Qiitaに資料を作成しました。

ブラウザのバグを踏んだっぽい時にご参照ください。

http://qiita.com/hashrock/items/189db03021b0f565ae27


2017/12/06追記

大枠のレイアウト方法について解説しましたが、

今後このようなレイアウトをする場合は、Grid Layoutの利用を推奨します。本記事の内容も有効ですが、若干古くなりつつありことに注意して下さい。

Flexbox / Grid Layout / floatの使い分けに関しては、icsの記事が参考になります。

個人的には、同種の要素を並べる時にflexbox, 異なる要素をレイアウトする時にgridを利用すると、文書構造として良いと思っています。

Grid LayoutはIE11とiOS10.2を切れる環境であれば導入できるでしょう。IE11では引き続きflexboxの利用を推奨します。

https://caniuse.com/#feat=css-grid