[CSS]そろそろFlexboxをまとめてみる

IE10のシェアも全体の1%を切ったということで、そろそろガンガンFlexbox使ってもいいかなと思ったり思わなかったり。
この辺、クライアントにも依存するところはありましてね、柵やらなんやらね。

とは言いましても一般的な話でIE10のシェアが全体の1%を切ったのはstatcounterによれば事実。IE11も7.5%と制作サイトによっては無視していいレベルです。（この辺は色んな考え方もありますが。）
かと言ってEdgeのシェアが増えた訳じゃないんですけどね・・・。

Source: StatCounter Global Stats – Browser Version Market Share

Flexboxとは？

けっこう前から存在はしますが、以前はブラウザによって書き方が違ったり仕様が変わったりで、使うのは困難でした。
しかしモダンブラウザでは難なく使用できるようになりIEのシェアなども手伝い実践で使用しても問題ないかなぐらいになってきたと思います。

FlexboxはFlexboxコンテナとFlaxboxアイテムからなります。

Flexboxコンテナ

Flexboxを利用するために必ず必要なもので「display:flex」と指定すれば、Flexboxコンテナとして定義されます。

Flexboxアイテム

Flexboxコンテナの子要素で実際にレイアウトされるものです。特にCSSを指定するとこはありません。

「display:flex」のデモ

html

<div class="default-flex">
    <ul>
        <li><a href="#">Menu 01</a></li>
        <li><a href="#">Menu 02</a></li>
        <li><a href="#">Menu 03</a></li>
        <li><a href="#">Menu 04</a></li>
        <li><a href="#">Menu 05</a></li>
    </ul>
</div>

css

.default-flex ul {
  display: flex; //Flexboxコンテナ
}
.default-flex ul li a {
  display: block;
  background: #FF0044;
  color: #fff;
  padding: 1em;
  margin: 0.5em;
  text-decoration: none;
}

これが基本形ですが「justify-content」プロパティを追加すると配置変更も可能です。

justify-content

右揃え

css

.default-flex ul {
  display: flex; //Flexboxコンテナ
}
.default-flex ul li a {
  display: block;
  background: #FF0044;
  color: #fff;
  padding: 1em;
  margin: 0.5em;
  text-decoration: none;
  justify-content: flex-end; //これで右揃え
}

中央揃え

css

.default-flex ul {
  display: flex; //Flexboxコンテナ
}
.default-flex ul li a {
  display: block;
  background: #FF0044;
  color: #fff;
  padding: 1em;
  margin: 0.5em;
  text-decoration: none;
  justify-content: space-between; //これで均等割付
}

均等割付

css

.default-flex ul {
  display: flex; //Flexboxコンテナ
}
.default-flex ul li a {
  display: block;
  background: #FF0044;
  color: #fff;
  padding: 1em;
  margin: 0.5em;
  text-decoration: none;
  justify-content: space-between; //これで均等割付
}

均等割付

上の均等割付との違いは両端にスペースが空くことです。
と言うか有効スペースを4等分(メニューが4つなので)して要素を中央の配置します。

css

.default-flex ul {
  display: flex; //Flexboxコンテナ
}
.default-flex ul li a {
  display: block;
  background: #FF0044;
  color: #fff;
  padding: 1em;
  margin: 0.5em;
  text-decoration: none;
  justify-content: space-around; //これで均等割付
}

と様々なレイアウトがあり、flat等に比べると自由度はかなり高いです。

他にも「flex-direction」「flex-wrap」「flex-flow」などなどけっこうプロパティが多いので次回以降、順次紹介していきたいと思います。