3行で説明、flexboxとは

CSS3から導入されたfloatに変わる新しいレイアウト方法です。

伸びたり並んだりします。

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

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

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

リキッド2カラムレイアウト
スティッキーフッタ（最下部に吸い付くフッタ）

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

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

display: flex
flex: 1
flex-direction: column

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

2カラムレイアウト

さて、よくある2カラムレイアウトです。
ではまず、幅を伸ばす要素と伸ばさない要素の二つに分けて考えましょう。

伸ばさない要素の方には普通にwidth: 300pxのように幅を指定します。
幅を伸ばす要素の方にはflex: 1を指定します。
上記二要素の親にはdisplay: flexを指定します。

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カラムレイアウト

これも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;
}

ヘッダ・フッタ（スティッキーフッタ）

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

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

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

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

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;
}