Flexbox

Bootstrap 4からCSS3のFlexboxを全面的に利用するようになった。ここではFlexboxを利用するためのBootstrapユーティリティについて説明する。なおFlexboxの解説は A complete guide to Flexbox がおすすめ。

記法まとめ

書式(クラス名)はFlexboxのCSSプロパティ/値に対応している(詳しくは Flexbox (W3C) または MDN - Flexbox を参照)。

display プロパティの設定 (⇒ 表示ユーティリティ)

.d(-sm|-md|-lg|-xl)?-(flex|inline-flex)

flex-direction プロパティの設定

.flex(-sm|-md|-lg|-xl)?-(row|column)(-reverse)?

justify-content プロパティの設定

.justify-content(-sm|-md|-lg|-xl)?-(start|end|center|between|around)

align-items プロパティの設定

.align-items(-sm|-md|-lg|-xl)?-(start|end|center|baseline|stretch)

align-self プロパティの設定

.align-self(-sm|-md|-lg|-xl)?-(start|end|center|baseline|stretch)

flex プロパティの設定 (⇒ flex: 1 1 auto; )

.flex(-sm|-md|-lg|-xl)?-fill

flex-(grow|shrink) プロパティの設定

.flex(-sm|-md|-lg|-xl)?-(grow|shrink)-(0|1)

flex-wrap プロパティの設定

.flex(-sm|-md|-lg|-xl)?-(nowrap|wrap|wrap-reverse)

order プロパティの設定

.order(-sm|-md|-lg|-xl)?-(0|1|2|3|4|5|6|7|8|9|10|11|12|first|last)

align-content プロパティの設定

.align-content(-sm|-md|-lg|-xl)?-(start|end|center|between|around|stretch)

自動マージン

.m(l|t|r|b)?-auto

縦横の配置順序

.flex(-sm|-md|-lg|-xl)?-(row|column)(-reverse)?

要素の間隔設定

.justify-content(-sm|-md|-lg|-xl)?-(start|end|center|between|around)

要素の配置設定

.align-items(-sm|-md|-lg|-xl)?-(start|end|center|baseline|stretch)

In examples below, parent box heights are fixed to 5rem.

個別要素の配置設定

.align-self(-sm|-md|-lg|-xl)?-(start|end|center|baseline|stretch)

以下の例では親ボックスの高さを 5rem に固定し、中央の子アイテムに設定している。

フィル

.flex(-sm|-md|-lg|-xl)?-fill

子アイテムを親ボックス全体にフィルする場合は .flex-fill を設定する。子アイテムはそれぞれのコンテンツの幅(または高さ)に対応して親要素全体に引き延ばされる。

例: 各アイテムに .flex-fill を設定

伸び縮み

.flex(-sm|-md|-lg|-xl)?-(grow|shrink)-(0|1)

CSSの flex-grow プロパティはデフォルトで 0 に設定されている(自動的に伸びない)。特定要素だけを親要素全体に引き延ばす場合は .flex-grow-1 を用いることができる( flex-grow: 1 に設定)。

CSSの flex-shrink プロパティはデフォルトで 1 に設定されている(必要に応じ折り返して縮む)。特定要素を元のサイズ以下に縮まないようにする場合は .flex-shrink-0 を用いることができる( flex-shrink: 0 に設定)。

自動マージン

.m(l|t|r|b)?-auto

デフォルト

アイテム1に .mr-auto を設定

アイテム3に.ml-auto を設定

自動マージン + 個別要素配置

例1

• 親ボックスに.flex-column.align-items-start + style="height:10rem" を設定
• アイテム1に .mb-auto を設定

例2

• 親ボックスに .flex-column.align-items-end + style="height:10rem" を設定
• アイテム３に .mt-auto を設定

ラップ

.flex(-sm|-md|-lg|-xl)?-(nowrap|wrap|wrap-reverse)

以下の例では親ボックスの幅を 15rem に固定しライトグレーの背景を付けている。

.d-flex.flex-nowrap

.d-flex.flex-wrap

.d-flex.flex-wrap-reverse

順序

.order(-sm|-md|-lg|-xl)?-(0|1|2|3|4|5|6|7|8|9|10|11|12|first|last)

例: DOM順序は(1,2,3,4,5)、.order-* は(4,2,5,1,3)の順

アラインメント

.align-content(-sm|-md|-lg|-xl)?-(start|end|center|between|around|stretch)

例: ラップ.flex-wrap との組み合わせ

構成

• 親ボックス div.flex-wrap
  • クラス .align-content-(start|end|center|...)
  • 属性 style="width: 300px; height: 150px;" (幅と高さを固定)
  • 内部の子アイテム div (×8)

フロート

要素フローティングの設定(左右配置して後続インライン要素をボックス内回り込み処理)

基本設定

.float-(left|right|none)

レスポンシブ設定

.float-(sm|md|lg|xl)-(left|right|none)

設定例

.float-sm-left

.float-sm-right

.float-md-left

.float-md-right

.float-lg-left

.float-lg-right

.float-xl-left

.float-xl-right

画像置換

サイトのタイトルやロゴに専用画像を用いる場合の対応法(以下例)

• h1.text.hide
  • 属性 background-image: url("../img/sample-logo.png");
  • 属性 width: 224px;
  • 属性 height: 48px;
  • テキスト Sample Logo

設定例(テキスト Sample Logo は表示されないがマークアップとして認識される)

Sample Logo