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

bootstrap 4 alpha

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割合
1135.36%
102.31%
93.42%
82.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 と段階を経ていくようなので、正式リリースはもう少しかかりそうですが、ダウンロードして使ってみても良いのではないでしょうか。

現場からは以上です。

関連記事