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

  • 547
    Like
  • 3
    Comment
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