[CSS] Flexible Boxをいい加減覚えます

Flexible Boxって便利ですよね。覚えるためにもまとめてみました。

display:flexの存在を知った時は嬉しかったんですが、未だ全然プロパティやらを覚えなくていちいちググってこちらのサイトとかこちらのサイトにお世話になってました。

これじゃダメだと思い、自分でも覚えるため基本的なことだけですが、ちょいとまとめてみました。

Flexible Boxってなに？

Flexible Boxとは、簡単言うと、カラムレイアウトが簡単にできます。ってやつです。
以前はfloatとかinline-blockとかtable-cellとか駆使してやってたやつ。
名前からしてフレキシブルにPCだとかスマホだとかのレイアウトに対応できるって感じなんですかね。
どう言うことができるかって、こちらのサイトにもあるように、
下記のことができちゃいます！

たった一行の指定で要素を横並びにできる。

どちらに向かって要素を並べるか決められる。

ボックス内で折り返すかどうか、折り返すならその方向はどちらかを指定できる。

要素を並べる順番を自由に指定できる。

ボックス内の要素のサイズを自由に指定できる。

要素の上下中央揃えを指定できる。

出典：【CSS】Flexbox（フレキシブルボックスレイアウト）で要素を横並びにする方法

ただ、ブラウザによって対応してないのとかあるので、レガシーのも考慮しないといけないとなると使用するのは躊躇しますね。代替え案考えるのが面倒くさいので、なら最初から別の方法で対応しますね、きっと。
ということで、一応、下記の通り、ブラウザ対応になります。

環境・ブラウザ対応

IE：11.0 (10.0 -ms-)
Chorme：29.0 (21.0 -webkit-)
Firefox：22.0 (18.0 -moz-)
Safari：6.1 -webkit-

基本的な使い方

囲んでいる要素（flexコンテナ）に対して、下記のコードを設定する。
display:flex;
基本、これだけで横並びになります。
float left rightを使ってclearfixなるものを使って時は想像できないですよね。

HTML
CSS
PREVIEW

<ul class="flex-test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.flex-test{
  display:flex;
}
.flex-test li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

あーほんと楽です。IE9とか使わないで欲しいですね。
でも、これだけじゃ満たせないレイアウトもあるので、他のプロパティを見ていきましょう。

コンテナの設定

並べる方向を指定できる[flex-direction]

flex-direction:row;

左から順に並べることができます（デフォルト）。

HTML
CSS
PREVIEW

<ul class="flex-test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.flex-test{
  display:flex;
  flex-direction:row;
}
.flex-test li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

flex-direction:column;

縦にできます。スマホだと必要になるのかも。

HTML
CSS
PREVIEW

<ul class="flex-test01">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

.flex-test01{
  display:flex;
  flex-direction:column;
}
.flex-test01 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

flex-direction:row-reverse;

今度は右から順に並べる。これって使うことあるのかね。

HTML
CSS
PREVIEW

<ul class="flex-test02">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.flex-test02{
  display:flex;
  flex-direction:column;
}
.flex-test02 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

flex-direction:column-reverse;

縦で尚且つ順序を逆にする。

HTML
CSS
PREVIEW

<ul class="flex-test03">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

.flex-test03{
  display:flex;
  flex-direction:column-reverse;
}
.flex-test03 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

折り返しの設定[flex-wrap]

基本は折り返してくれないので、レスポンシブの時とかやるかもです。

flex-wrap:nowrap;

折り返しません（デフォルト）。

HTML
CSS
PREVIEW

<ul class="flex-test_b">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

.flex-test_b{
  display:flex;
  flex-wrap:nowrap;
}
.flex-test_b li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

flex-wrap:wrap;

コンテナからはみ出したものは、折り返してくれます。

HTML
CSS
PREVIEW

<ul class="flex-test_b01">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

.flex-test_b01{
  display:flex;
  flex-wrap:wrap;
}
.flex-test_b01 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

flex-wrap:wrap-reverse;

左から折り返されますが、なぜか下から上になります。

HTML
CSS
PREVIEW

<ul class="flex-test_b02">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

.flex-test_b02{
  display:flex;
  flex-wrap:wrap-reverse;
}
.flex-test_b02 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

横の並びの調整[justify-content]

すべての要素を中央に寄せたいとか、左につけたいとか、間隔をあけて並べたいとかが可能です。
flexコンテナに指定します。

justify-content:flex-start;

左揃えになります。デフォルトのなのでデモ割愛。

justify-content:flex-end;

右揃えになります。

HTML
CSS
PREVIEW

<ul class="flex-test_c01">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.flex-test_c01{
  display:flex;
  justify-content:flex-end;
}
.flex-test_c01 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

justify-content:center;

中央揃え。これ使います。

HTML
CSS
PREVIEW

<ul class="flex-test_c02">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.flex-test_c02{
  display:flex;
  justify-content:center;
}
.flex-test_c02 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

justify-content:space-between;

均等に間隔をあけます。両端は完全に側にくっついちゃいます。

HTML
CSS
PREVIEW

<ul class="flex-test_c03">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.flex-test_c03{
  display:flex;
  justify-content:space-between;
}
.flex-test_c03 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

justify-content:space-around;

均等に隙間をあけてくれます。

HTML
CSS
PREVIEW

<ul class="flex-test_c04">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.flex-test_c04{
  display:flex;
  justify-content:space-around;
}
.flex-test_c04 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

全体の縦の並びの調整[align-content]

コンテナに余白があった場合に縦軸に調整してくれます。
※このプロパティは複数行ないと効果がないようです。なので、flex-wrap:wrap;とか指定してください。

align-content:flex-start;

上に揃えます（デフォルト）。

align-content:flex-end;

下に揃えます。

HTML
CSS
PREVIEW

<ul class="flex-test_d01">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

.flex-test_d01{
  display:flex;
  align-content:flex-end;
  height:260px;
  flex-wrap:wrap;
}
.flex-test_d01 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

align-content:center;

縦の真ん中に揃えます。

HTML
CSS
PREVIEW

<ul class="flex-test_d02">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

.flex-test_d02{
  display:flex;
  align-content:center;
  height:260px;
  flex-wrap:wrap;
}
.flex-test_d02 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

align-content:space-between;

上下一番端にくっつけます。

HTML
CSS
PREVIEW

<ul class="flex-test_d03">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

.flex-test_d03{
  display:flex;
  align-content:space-between;
  height:260px;
  flex-wrap:wrap;
}
.flex-test_d03 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

align-content:space-around;

余白を均等に空けて揃えてくれます。

HTML
CSS
PREVIEW

<ul class="flex-test_d04">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

.flex-test_d04{
  display:flex;
  align-content:space-around;
  height:260px;
  flex-wrap:wrap;
}
.flex-test_d04 li{
  font-size:20px;
  width:60px;
  height:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

align-content:stretch;

コンテナの大きさに合わせて中身を同じ高さに揃えてくれます。アイテムに高さを指定してたら効果がなかったので、heightを削除しちゃいます。

HTML
CSS
PREVIEW

<ul class="flex-test_d05">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

.flex-test_d05{
  display:flex;
  align-content:stretch;
  height:260px;
  flex-wrap:wrap;
}
.flex-test_d05 li{
  font-size:20px;
  width:60px;
  background:#aaa;
  margin:5px;
  text-align: center;
  line-height: 60px;
}

アイテムの設定

今度は、各アイテムに対して、いろいろ設定できます。

順番の変更[order]

通常は、ソースコードの上か下へと順番は流れていくんですが、これを指定すると順番を変更することができます。値は数字でマイナスから指定できます。

.item {
  order: 1;
}

アイテムの幅の率の変更[flex-grow]

何も指定しなければ均等な幅になるのですが、例えば一つだけ2とかにするとそれだけ2倍の比率になり、他のアイテムはその分縮小されます。

.item {
  flex-grow: 1;
}

アイテムの幅の収縮率の変更[flex-shrink]

今度は縮む率を指定します。

.item {
  flex-shrink: 1;
}

アイテムの幅の収縮率の変更[flex-basis]

幅の指定ができます。

.item {
  flex-basis: 20%;
}

縦揃えの指定[align-self]

指定したアイテムにだけ、縦の整列を適応できます。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

よく使いそうなテンプレート

グローバルナビを想定

センターのグローバルナビゲーション。

HTML
CSS
PREVIEW

<ul class="flex-gv01">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

    .flex-gv01{
      display:flex;
      justify-content:center;
    }
    .flex-gv01 li{
      font-size:20px;
      width:60px;
      height:60px;
      background:#aaa;
      margin:5px;
      text-align: center;
      line-height: 60px;
    }

グローバルナビを想定 ver.2

ロゴを含めたグローバルナビゲーション。幅はflex-basisを使ってみました。

HTML
CSS
PREVIEW

<ul class="flex-gv02">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

    .flex-gv02{
      display:flex;
      justify-content:center;
    }
    .flex-gv02 li{
      font-size:20px;
      flex-basis: 8%;
      height:60px;
      background:#aaa;
      margin:5px;
      text-align: center;
      line-height: 60px;
    }
    .flex-gv02 li:first-child{
        margin-right: auto;
        flex-basis: 100px;
    }

なんかもっとないかな。。あったら随時追加していきます。

まとめ

古いIEももう廃れてきてて、IE6-9とかその辺考慮してコーディングしてくださいねーなんて言われなくなってきた。それ前提でってのもあるんだろうけど。
その分スマホサイトを意識しないといけないからかな。まぁ、使い勝手がいいflexの基本的なまとめでした。

今回お世話になった参考サイト