Bootstrap 4 alphaからCSSレイアウトのflexboxが使えるようになった

Web/20 Aug 2015

bootstrap ファンの皆さん、8 月 19 日付けで Bootstrap 4 alpha が発表されました。なので、現行の Bootstrap サイトには「Aww yeah, Bootstrap 4 is coming!」と表示されております。

Bootstrap 4 alpha is comming

Bootstrap 4 alphaの公式ブログで言及されている変更箇所で気になったのが以下のポイントです。

  • LESS から Sass(SCSS)
  • CSS レイアウトに Flexbox を採用
  • IE8 以下を未対応

また、Getting startedからいくつかのコンポーネントを見ていると、よりフラットになっています。

Bootstrapの3と4のフォームを比較

フォーム部分を比べてみると、4 はシャドウがなく、他にもボタンなどに使われているカラーの明度が上がって全体的に明るくなった感じがします。

個人的には、LESS の存在感がなくなったことは悲しいですが、時代の趨勢なのでやむなし。IE8 も同じで、「IE8 対応が必要な場合は、Bootstrap3 を使ってね」との記載もあるくらいです。

If you need IE8 support, keep using Bootstrap 3.

ただ、古いバージョンのサポートを切ったのは、Bootstrap が Flexbox を採用したことが少なからず影響しているのかもしれません。そして、これによってさらに Flexbox を使った CSS レイアウトが普及しそうです。

Bootstrap での Flexbox の使い方

Flexbox については、過去に記事「Flexbox を使いこなして柔軟過ぎる CSS レイアウトを実現しよう。」を書いております。

Getting started - Flexboxに Bootstrap で Flexbox を使う手順が記載されていますが超簡単です。 Bootstrap をダウンロードし、SCSS を変更してコンパイルし直すだけ。なので、SCSS を使えれば問題ないですね。

変数定義の SCSS ファイルの値を変更する

_variables.scss という変数定義だけのファイルがあり、42 行目辺りに「Options」という部分があります。この項の $enable-flex を初期値の false からtrueに変えるだけです。

mixin ディレクトリの _grid.scss を見ていただくと、下記のように記述されています。

@mixin make-row($gutter: $grid-gutter-width) {
  @if $enable-flex {
    display: flex;
    flex-wrap: wrap;
  } @else {
    @include clearfix();
  }
  margin-left: ($gutter / -2);
  margin-right: ($gutter / -2);
}

@if $enable-flex {} の部分で処理を分岐させており、初期値の false では@include clearfix(); が呼び出されていることがわかります。なので、true に変えた場合は、display: flex;flex-wrap: wrap; となり、これで子要素が flex アイテムとなります。

Flexbox を使う時は IE9 と IE10 は要注意

2015/08/12 時点での Flexbox のブラウザ対応状況を見ると、下記の通りです。 flexの使用状況

主要ブラウザの最新版は概ね対応していますが、IE9 は完全にアウトで、IE10 は部分的にサポートしている状態です。なので、通常の Bootstrap4 対応条件と Flexbox を使う際の対応条件が異なるので注意が必要です。

また、実際に未対応の IE を使っている人はどの程度いるのかを StatCounter を使って見ると、 ブラウザ状況

Chrome と IE11 と Firefox で全体の 85%あります。これをさらに IE だけに絞って見ると、以下の通り。 ブラウザ状況

IE 割合
11 35.36%
10 2.31%
9 3.42%
8 2.47%

※ 上記画像と表は、地域を日本に設定し、期間を 2014/08 - 2015/07 とした場合のものとなります。

これを見る限りでは、下位バージョンの IE は切って良い気もしますね。ちなみにこのサイトでは、IE9 はわずかに 1.28%、IE10、IE8 は 1%未満です。

ファイルサイズの違い

今、改めてダウンロードファイルを見ると bootstrap-flex.scss が用意されており、 _variables.scss 内の変数を変更せずとも Flexbox 版が使えるようです。で、どちらもコンパイルしてミニファイ化すると、ファイルサイズに差異はありませんでした。

ファイルサイズの違い

追記: コンパイルエラーが出るかも

Bootstrap 4 alpha で下記のコンパイルエラーが出る場合があるそうです。

エラー

この場合は、mixin ディレクトリの _grid-framework.scss の 33 行目の @extend %grid-column-float-#{$breakpoint};!optional フラグをつけてください。

@for $i from 1 through $columns {
  .col-#{$breakpoint}-#{$i} {
    @extend %grid-column-float-#{$breakpoint} !optional; //== ← ここ
    @include make-col-span($i, $columns);
  }
}

今回が Alpha で、これから Beta -> RC -> final と段階を経ていくようなので、正式リリースはもう少しかかりそうですが、ダウンロードして使ってみても良いのではないでしょうか。

現場からは以上です。