はじめに

ダウンロード方法や使い方を含むBootstrapの概要や、いくつかの基本的なテンプレートや例など。

Flexbox

ついにBootstrapでFlexboxがサポートされるようになりました。変数の変更やスタイルシートの交換によって新しいCSSレイアウトスタイルにすることができます。

目次

含まれるもの

Flexboxのサポートは、Bootstrapの数多くのコンポーネントで利用可能です:

  • float から display: flex; に交換した、全体のグリッドシステム (mixin と事前定義されたクラス)
  • display: table; から display: flex; に変換した、Input グループ
  • メディアコンポーネントは display: table; や 数多くのハッカーのようなスタイルをシンプルなdisplay: flex;に変換します

ベンダープレフィックスは、GruntのAutoprefixerでコンパイルされたCSSにおいて提供されます。

なぜ Flexbox か?

ひとことで言えば、Flexbox は CSS においてよりシンプルでフレキシブルなレイアウトのオプションを提供します。具体的に提供するものとしては:

  • 親要素内のコンテンツの垂直方向の配置が簡単に行えます。
  • メディアクエリの助けを借りて、各デバイスと各画面解像度におけるコンテンツの並べ替えが簡単に行えます。
  • Gridベースのレイアウトのための同じ高さの列をCSSのみで簡単に表現できます。

これらすべてのことは Flexbox を使用しなくても可能ですが、大体は正しく行うための余計なハックや回避策が必要となります。

使い方

あなたはSass(または他のCSSプリプロセッサ)での変数の変更に精通している場合、心地よくFlexboxモードに移行できるでしょう。

  1. _variables.scss ファイルを開き、$enable-flex 変数を見つけます。
  2. それを false から true に変更します。
  3. 再コンパイルしたら完了です!

または、ソースの Sass ファイルが必要なければ、CSS コンパイルされたデフォルト Bootstrap を、コンパイルされたフレックスボックスに交換できます。もっと情報が欲しければダウンロードページをご覧ください。

ブラウザサポート

Flexbox を有効にすることは、サポートするブラウザとデバイスが減ることを意味します:

  • Internet Explorer 9 以下は、Flexbox をサポートしません。
  • Internet Explorer 10 は、いくつかの既知の問題 (Can I use… の “Known issues” タブを参照) があります。また、プレフィックスが必要です。そして、古い2012バージョン以降の仕様の構文のみをサポートしています。

プロジェクト内のFlexboxを有効にするときは、ユーザーの基盤を特に意識してください。Flexboxのブラウザサポートの詳細は Can I use… をご覧ください。