Home
ウェブ制作
ウェブデザイン
ウェブデザイン

Bootstrap 4 の新機能を徹底比較！Flexbox と通常グリッドの使い方まとめ

bootstrap-4-flexbox-grid

 

Bootstrap 4 では慣れ親しんだグリッドシステムに変更が加えられました。より大きな画面サイズに対応する XL グリッドが追加された他、新しいグリッドシステム「フレックスボックス」バージョンが収録されました。

 

 

通常のグリッドと Flexbox 版には互換性がないので、プロジェクトに応じてどちらを利用するか選択する必要があります。この記事ではBootstrap 4における2つのグリッドシステムの違いを詳しく見ていきましょう。比較しやすいよう、グリッドを利用した具体的な参考デモページも用意しています。

 

 

 

コンテンツ目次

 

01. インストール

 

Bootstrap をプロジェクトに利用する一般的な方法は、CDNまたはローカルファイルを使った記述方法です。フレックスレイアウト用と通常グリッド用にコンパイルされた別々のバージョンが用意されています。

 

<!-- オリジナル Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" >

<!-- Flexbox グリッド Bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" rel="stylesheet" >

 

独自のBootstrap をコンパイルするときは、メインとなる Sass ファイルの #enable-flex をオンにしましょう。

 

_variables.scss

$enable-flex = true;

 

ファイルサイズを比較してみると、追加ルールや必要なベンダープレフィックスによって Flexbox バージョンが少しだけ大きくなっています。しかし、119KB と 105KB と少しの差なので、多くのケースであまり問題ではないでしょう。

目次へ戻る

 

 

 

02.　通常のグリッドレイアウト Basic Grid

 

多くのひとが Bootstrap グリッドの使い方を知っていると思います。12個に等しく分割された行（英: row）に、各列（英: column）は 1〜12 の任意のスペースを指定することができます。

 

<div class="row">
   <div class="col-xs-2">.col-xs-2</div>
   <div class="col-xs-4">.col-xs-4</div>
   <div class="col-xs-6">.col-xs-6</div>
</div>

 

新しい Flexbox モードでは、指定されたサイズで列を残すことができる自動レイアウトオプションが利用されています。

 

<div class="row">
    <div class="col-xs">.col-xs</div>
    <div class="col-xs">.col-xs</div>
    <div class="col-xs">.col-xs</div>
</div>

 

列のサイズが決まっていない Flexbox グリッドでは、空いているスペースを均等に共有し、常に行全体が埋まるように設定されます。列の幅を広くしたいときは、.col-xs-〇〇 クラスを利用しましょう。

 

以下のサムネイルをクリックすることで、両方のグリッドシステムを同時に確認することができます。

 

1-basic-grid-e1479213867838

目次へ戻る

 

 

 

03.　カラムの折り返し Column Wrapping

 

1つの行（英: row）に含まれる列（英: column）の合計が12を超える場合、余分な部分は自動的に次に移動します。カラムの折り返しとして知られ、通常のグリッドレイアウトでも flexbox グリッドレイアウトでも同じように利用できます。

 

<div class="row">
   <div class="col-xs-6">.col-xs-6</div>
   <div class="col-xs-6">.col-xs-6</div>
   <div class="col-xs-3">.col-xs-3, このカラム列は次の行に自動的に移動します。</div>
</div>

 

Flexbox グリッドレイアウトでは、一行に入り切らない列は次の行全体に広がって表示されることを覚えておきましょう。

 

2-column-wrapping

目次へ戻る

 

 

 

04.　レスポンシブ・グリッド Responsive Grid

 

はじめにも触れたように Boostrap 4 には、大きな画面サイズに対応する XL　グリッドが追加されました。グリッドメディアのメディアクエリは以下の通りです。

 

  • Extra Small (XS) – 576px 以下
  • Small (sm) – 576px から 768px まで
  • Medium (md) – 768px から 992px まで
  • Large (lg) – 992px から 1200px まで
  • Extra Large (xl) – 1200px 以上

 

新しい XL グリッド以外は、これはまでのレスポンシブ・デザインに大きな変化はありません。通常と Flexbox レイアウトは同じように利用することができます。

 

3-responsive-grid

目次へ戻る

 

 

 

05.　行の高さ Column Height

 

古いグリッドシステムでは、すべてのカラム列の高さが異なります。

 

4-column-height-reg

 

 

Flexbox レイアウトでは、もっともコンテンツ量の多いカラム列に合わせて整列されます。

 

4-column-height-flex

目次へ戻る

 

 

 

06.　水平方向の整列 Horizontal Alignment

 

Bootstrap の通常グリッドでは、offsetシステムを利用して水平方向のカラム列を整列させます。オフセットは空の列のように使うことができ、要素を右方向に移動させることができます。（offset-xs-3 は右に3カラム移動します。）これでもいいのですが、必要なスペースを手動で調整する必要があるので、すこし面倒かもしれません。

 

<div class="row">
    <div class="col-xs-6 offset-xs-3">この列は中央に表示されます。</div>
</div>

 

Flexbox のjustify-contentプロパティのおかげで、クラスを追加するだけで手軽に整列させることができます。

 

<div class="row flex-items-xs-center">
    <div class="col-xs-6">この行にあるすべてのカラムは、自動的に中央に整列されます。</div>
</div>

 

また、オフセット機能を利用したいときにも対応できます。

 

5-horizontal-alignment

目次へ戻る

 

 

 

07.　垂直方向の整列 Vertical Alignment

 

Bootstrap の通常グリッドでは、垂直方向の配置オプションはありません。垂直方向の配置を行う唯一の方法は、CSSでカスタマイズすることですが、こちらも少し面倒です。

 

その一方、Flexbox レイアウトは縦方向の調整にも優れており、２つの方法で列を垂直方向に配置することができます。

 

行全体を水平方向に揃えたいとき。

 

<div class="row flex-items-xs-middle">
 	<div class="col-xs"> Middle </div>
</div>  
<div class="row flex-items-xs-bottom">
	<div class="col-xs"> Bottom </div>
</div>
<div class="row flex-items-xs-top">
	<div class="col-xs"> Top </div>
</div>

 

 

行の中にある各カラム列を揃えたいとき。

 

<div class="row">
    <div class="col-xs flex-xs-middle"> Middle </div>
    <div class="col-xs flex-xs-bottom"> Bottom </div>
    <div class="col-xs flex-xs-top"> Top </div>
</div>

 

6-vertical-alignment

目次へ戻る

 

 

 

08. 列の並び替え Reordering Columns

 

通常のグリッドシステムでは、カラム列の順序を並び替えたいとき、pushとpullを利用する必要があります。最高の解決法とは言えませんが、レイアウトはうまく実現することができます。

 

<div class="row">
    <div class="col-xs-4 push-md-8"> スクリーンサイズ MD では、右に8カラム分移動します。</div>
    <div class="col-xs-8 pull-md-4">スクリーンサイズ MD では、左に4カラム分移動します。</div>
</div>

 

Flexbox を使ったことのあるひとなら、orderプロパティがあるのを知っていると思います。Bootstrap ではクラスを追加することで、列の並び替えを行うことができます。

 

  • .flex-xs-first – 行の最初に表示
  • .flex-xs-last – 行の最後に表示
  • .flex-xs-unordered – 行の最初と最後のあいだに表示

 

手動で計算する必要はありません。3つ以上のカラム列ならべたいときは、pushとpullクラスを利用するか、CSSのorderプロパティを利用する必要があります。

 

7-column-reordering

目次へ戻る

 

 

 

最後に。

 

この記事で取り上げたポイントを振り返ると、Flexbox モードはより高度でさまざまな使い方ができることが分かると思います。実際、通常のグリッドシステムに加え、Flexbox専用の機能が追加されています。Bootstrap の Flexbox の唯一の欠点が、IE9のサポート外という点です。

 

今回は、Bootstrap 4 の新しいグリッドシステムについて詳しく比較してみました。デモページをブックマークしておけば、今後いつでも確認することもできます。

 

 

海外サイト Tutorialzine で公開された Bootstrap 4: Regular Grid VS Flexbox Grid by Danny Markov より許可をもらい、翻訳転載しています。

 

参照元リンク : Bootstrap 4: Regular Grid vs Flexbox Grid – Tutorialzine

Related
Latest