ちょっと凝ったデザインも簡単に?便利なFlexboxを使ってみよう

マークアップ

2016.10.21(Fri)

こんにちは。マークアップエンジニアの近藤です。 今日はCSS3のFlexboxについてご紹介します。

Flexboxとは?

CSS3で実装されたレイアウトモジュールで、画面の幅などに合わせて柔軟なレイアウトが可能となっています。 数年前から実装自体はされていましたが、ブラウザの実装状況がまちまちであったために使うのを躊躇していた方も多いかと思います。

対応ブラウザ

対応ブラウザ

http://caniuse.com/#search=flex

現行の最新ブラウザでは問題なく利用できます。iOS版safari8.4までとAndroid4.3まではベンダープレフィクスが必要になります。
IEは正式には11以降に対応しています。IE10では記述が少々異なりますので対応の際は注意が必要です。
残念ながらIE9には対応していません。
ただ、IE9自体のサポートは2017年4月で終了します。
最新ブラウザへの乗り換えもかなり進んでいますので、実務で利用してもほぼ問題ないと言えるかと思います。
現時点でどうしてもIE9に対応させたい!というのであればpolyfillを読み込ませて使うという手段もあります。

flexibility

https://github.com/jonathantneal/flexibility

どんな事ができるの?

Demo

例えばよく見るメニューのナビゲーション。

サンプルHTMLのnav部分スクリーンショット

HTML

<ul class="navi">
  <li>メニュー01</li>
  <li>メニュー02</li>
  <li>メニュー03</li>
  <li>メニュー04</li>
</ul>

今までfloatやinline-blockで実装していたかと思います。
それが

CSS

.navi {
  display: flex;
}

親要素にこの1行を入れるだけで横並びが実現できます。
floatを解除する必要もなければ、inline-blockでできる隙間を調整する必要もない!素晴らしい!

デフォルトが横並びに設定されていますが、もちろん縦に並べる事もできます。

こんなレイアウトの時に使いたい

case01:文章の量がまちまちなコンテンツの高さを揃えて、中央揃えにしたい

サンプルHTMLのdiv.case01部分スクリーンショット

HTML

  <div class="case01">
    <!-- テキストの天地中央揃え -->
    <div class="col3">
      <div class="column">
        <p class="text">サクラ(桜)は、バラ科モモ亜科スモモ属 (Prunus, Cerasus) の落葉樹の総称。[Wikipediaより]</p>
      </div>
      <!-- /.column -->
      <div class="column">
        <p class="text">シバザクラ(芝桜、学名:Phlox subulata)はハナシノブ科の多年草。別名、ハナツメクサ(花詰草、花爪草)。<br>
          英名は「モスフロックス」(「苔状のフロックス」の意味)といい、同属をまとめてフロックスと呼ぶ。花期をずらして混植されることもある。フロックス・ストロニフェラ(ツルハナシノブ)、フロックス・ドラモンディー(スターフロックス)、フロックス・パニクラータ(オイランソウ、クサキョウチクトウ)等あるがそれぞれ別種である。[Wikipediaより]</p>
      </div>
      <!-- /.column -->
      <div class="column">
        <p class="text">カエデ(槭、槭樹、楓)とはムクロジ科(旧カエデ科)カエデ属 (Acer) の木の総称。<br>
          モミジ(紅葉、椛)とも呼ばれるが、その場合は様々な樹木の紅葉を総称している場合もある。童謡などで愛でられるものはそれである。[Wikipediaより]</p>
      </div>
      <!-- /.column -->
    </div>
    <!-- /.col3 -->
  </div>
  <!-- /.case01 -->

CSS

.case01 .col3 {
  display: flex;
-webkit-justify-content: space-between;
  justify-content: space-between;/*両端揃え*/
  margin: 20px auto;
  width: 90%;
}

.case01 .col3 .column {
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 20px;
  width: 25%;
  border: 1px solid #000;
}

高さを揃えるといえばjsを利用していたかと思いますが、その手間もありません。
今まで調整が難しかった天地中央揃えも、高さを指定することなく実現できます。

case02:コンテンツ量の違うボックスの高さを揃えて、ボタンを1番下に置きたい

サンプルHTMLのdiv.case02部分スクリーンショット

HTML

  <div class="case02">
    <!-- jsで高さ揃えるのに大変だったヤツ -->
    <div class="col3">
      <div class="column">
        <p class="img"><img src="images/photo01.jpg" alt=""></p>
        <p class="text">サクラ(桜)は、バラ科モモ亜科スモモ属 (Prunus, Cerasus) の落葉樹の総称。[Wikipediaより]</p>
        <button>BUTTON</button>
      </div>
      <!-- /.column -->
      <div class="column">
        <p class="img"><img src="images/photo02.jpg" alt=""></p>
        <p class="text">シバザクラ(芝桜、学名:Phlox subulata)はハナシノブ科の多年草。別名、ハナツメクサ(花詰草、花爪草)。<br>
          名は「モスフロックス」(「苔状のフロックス」の意味)といい、同属をまとめてフロックスと呼ぶ。花期をずらして混植されることもある。フロックス・ストロニフェラ(ツルハナシノブ)、フロックス・ドラモンディー(スターフロックス)、フロックス・パニクラータ(オイランソウ、クサキョウチクトウ)等あるがそれぞれ別種である。[Wikipediaより]</p>
        <button>BUTTON</button>
      </div>
      <!-- /.column -->
      <div class="column">
        <p class="img"><img src="images/photo03.jpg" alt=""></p>
        <p class="text">カエデ(槭、槭樹、楓)とはムクロジ科(旧カエデ科)カエデ属 (Acer) の木の総称。<br>
          モミジ(紅葉、椛)とも呼ばれるが、その場合は様々な樹木の紅葉を総称している場合もある。童謡などで愛でられるものはそれである。[Wikipediaより]</p>
        <button>BUTTON</button>
      </div>
      <!-- /.column -->
    </div>
    <!-- /.col3 -->
  </div>
  <!-- /.case02 -->

CSS

.case02 .col3 {
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;  /*等間隔配置*/
  margin: 20px auto;
  width: 90%;
}

.case02 .col3 .column {
  display: flex;
-webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap; /*縦並び*/
-webkit-align-content: space-between;
  align-content:         space-between;
  padding: 10px;
  width: 25%;
  border: 1px solid #000;
}

.case02 .col3 .column .img {
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
}

.case02 .col3 .column button {
  margin-top: 10px;
  width: 100%;
}

縦方向の均等配置にすれば、positionで指定することなくボタンを一番下に固定できます。

case03:PCとSPでコンテンツの順番を入れ替えたい

サンプルHTMLのdiv.case03部分スクリーンショット/PCビュー「demo_case03pc.png」とSPビュー「demo_case03sp.png」

HTML

  <div class="case03">
    <!-- 表示の順番入れ替え -->
    <div class="col2">
      <div class="column">
        <p class="text">スズメ(雀、すずめ、学名 Passer montanus )は、スズメ目スズメ科スズメ属に分類される鳥類の1種。人家の近くに生息する小鳥である。[Wikipediaより]</p>
        <p class="img"><img src="images/photo04.jpg" alt=""></p>
      </div>
      <!-- /.column -->
      <div class="column">
        <p class="text">ネコ(猫)は、狭義にはネコ目(食肉目)- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ(家猫、学名:Felis silvestris catus)の通称である。人間によくなつくため、イヌ(犬)と並ぶ代表的なペットとして世界中で広く飼われている。<br>
          より広義には、ヤマネコやネコ科動物全般を指すこともある。[Wikipediaより]</p>
        <p class="img"><img src="images/photo05.jpg" alt=""></p>
      </div>
      <!-- /.column -->
    </div>
    <!-- /.col2 -->
  </div>
  <!-- /.case03 -->

CSS

.case03 .col2 {
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;  /*等間隔配置*/
  margin: 20px auto;
  width: 90%;
}

.case03 .col2 .column {
  display: flex;
-webkit-align-content: space-between;
  align-content:         space-between;
  padding: 10px;
  width: 45%;
  border: 1px solid #000;
}

.case03 .col2 .column .img {
  width: 100%;
}
.case03 .col2 .column .text {
  width: 100%;
}

/*sp用*/
@media screen and (max-width:768px) {
  .case03 .col2 {
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;  /*等間隔配置*/
  margin: 20px auto;
  width: 90%;
  }

  .case03 .col2 .column {
    display: flex;
-webkit-flex-direction: column;
  flex-direction: column;
-webkit-align-content: space-between;
  align-content: space-between;
  margin-bottom: 20px;
    padding: 10px;
    width: 45%;
    border: 1px solid #000;
  }

  .case03 .col2 .column .img {
    margin-bottom: 10px;
    width: 100%;
  }
  .case03 .col2 .column .text {
    order: 1;/*数値が小さい方が先に表示される。defaltは0*/
    width: 100%;
  }
}

コンテンツの順番を入れ替えるのも、たった1行で済みます。

まとめ

地味に面倒であった天地中央揃えが1行書き足すだけで実現できる、という部分だけでも魅力的なFlexbox。
ボタンやナビゲーションで使えれば、コードもすっきりする上に時間も短縮できそうですね。
ここでご紹介した以外にも、複雑なレイアウトにも対応できます。
これからの主力になっていくと思われますので、まずはfloatで作ったレイアウトを置き換えてみるなど、簡単な所から使い始めてみてはいかがでしょうか?