kansiho's blog

ruby, python, javascript. Rails, wordpress, OpenCV, heroku...

今日からfloatは使うな!便利すぎるflexボックスについてまとめてみる

flexプロパティは、横並びの要素に対してとても便利なプロパティです。float, clearを使っていた時と比べ、コードが1/3くらいになるというのが体感値です。要素を逆並べするなど、float, clearのセットでは実現できないような挙動もシンプルに実現できます。

そんなflexプロパティの使い方から応用までまとめました。 基本的には以下の公式ドキュメントの引用になります(当記事執筆時)。

Flexible box ("Flexbox") layout in Internet Explorer 10 (Windows)

Flexbox レイアウトは、複雑な Web ページをレイアウトすることを目的とし、画面やブラウザー ウィンドウのサイズがさまざまに変化する場合にも要素の相対的な位置とサイズを一定に保つ場合に、特に役立ちます。位置とサイズを正しく設定するのが難しいフロートへの依存を軽減できます。

Flexbox レイアウトは、ボックスのサイズを定義するときに利用可能な領域を考慮することで、相対サイズと相対配置を有効にします。たとえば、ブラウザー ウィンドウ内の余分な空白を、複数の子要素にそのサイズに応じて均等に分配し、それらの子要素をコンテナーとなるブロックの中央に配置することができます。

flexbox レイアウトを使うと、次の作業が可能になる

  • 異なるサイズの画面やブラウザー ウィンドウを使用した際にも — 流動的で、しかも互いに相対的な位置とサイズを維持する複数の要素 (イメージ、コントロールなど) で構成されるレイアウトを構築する。 一連の要素のレイアウト軸 (水平または垂直) に並行する余白を、指定した要素のサイズの増加に比例して割り当てる方法を指定する。
  • 一連の要素のレイアウト軸に並行する余白を、一連の要素の前後または間に割り当てる方法を指定する。 左右に並べて配置されたボタンの上下の余白など、要素の周りにある、要素のレイアウト軸に対して垂直な余白の形を指定する。
  • ページ内に要素を配置する方向を制御する — たとえば、上から下、左から右、右から左、下から上など。 ドキュメント オブジェクト モデル (DOM) で指定されている順序とは異なる順序で、画面上の要素を並べ替える。
プロパティ説明

-ms-flex-direction

オブジェクトのすべての子要素のレイアウトの方向を指定します。

このプロパティに指定できる値は、次のキーワードです。

row

これは初期値です。子要素は、ソース ドキュメントで宣言されているのと同じ順序 (左から右) で表示されます。

-ms-box-orient:horizontal の例
column

子要素は、ソース ドキュメントで宣言されているのと同じ順序 (上から下) で表示されます。

-ms-box-orient:vertical の例
row-reverse

子要素は、ソース ドキュメントで宣言されているのと逆の順序 (右から左) で表示されます。

-ms-box-direction:normal の例
column-reverse

子要素は、ソース ドキュメントで宣言されているのと逆の順序 (下から上) で表示されます。

inherit

子要素は、親要素のこのプロパティの計算値と同じ順序で表示されます。

適用の仕方

1. flexコンテナを作る

.flex{
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
}

flexbox レイアウトを有効にするには、最初に flexbox コンテナーを作成する必要があります。

そうするには、要素の display プロパティを “-ms-flexbox” (ブロック レベルの flexbox コンテナーの場合) または “-ms-inline-flexbox” (インライン flexbox コンテナーの場合) に設定します。

(CSS 可変ボックス レイアウト モジュールの草案は暫定版であるため、この値を始め、このセクションのプロパティを Internet Explorer 10 と、Windows 8JavaScript を使った Windows ストア アプリで使うときは、いずれも Microsoft 固有のベンダー プレフィックス “-ms-” を付ける必要があります。)

2. flexbox の方向の設定

プロパティ説明

-ms-flex-direction

オブジェクトのすべての子要素のレイアウトの方向を指定します。

このプロパティに指定できる値は、次のキーワードです。

row

これは初期値です。子要素は、ソース ドキュメントで宣言されているのと同じ順序 (左から右) で表示されます。

-ms-box-orient:horizontal の例
column

子要素は、ソース ドキュメントで宣言されているのと同じ順序 (上から下) で表示されます。

-ms-box-orient:vertical の例
row-reverse

子要素は、ソース ドキュメントで宣言されているのと逆の順序 (右から左) で表示されます。

-ms-box-direction:normal の例
column-reverse

子要素は、ソース ドキュメントで宣言されているのと逆の順序 (下から上) で表示されます。

inherit

子要素は、親要素のこのプロパティの計算値と同じ順序で表示されます。

3. flexboxの子要素どうしの余白の配分の指定

プロパティ説明

-ms-flex-pack

オブジェクトの子要素間の余白 (-ms-flex-direction プロパティで定義された軸の方向の余白) の分配方法を指定します。

このプロパティに指定できる値は、次のキーワードです。これらのキーワードは writing-mode に依存することに注意してください。親要素と子要素の開始エッジと終了エッジはレイアウト方向に依存します。たとえば、開始エッジは、左から右のレイアウトの場合は親要素の左端、上から下のレイアウトの場合は上端のようになります。同様に、子要素の終了エッジは、左から右のレイアウトの場合は右端、上から下のレイアウトの場合は下端のようになります。

start

これは初期値です。レイアウト軸の方向に沿って、最初の子要素の開始エッジが親要素の開始位置に揃えて配置され、以降の子要素の開始エッジが前の子要素の終了エッジに揃えて配置されていきます。レイアウト軸の方向のすべての余白が、レイアウト軸方向の末尾に配置されます。

-ms-box-pack:start の例
end

レイアウト軸の方向に沿って、最初の子要素の終了エッジが親要素の終了位置に揃えて配置され、以降の子要素の終了エッジが前の子要素の開始エッジに揃えて配置されていきます。レイアウト軸の方向のすべての余白が、レイアウト軸方向の先頭に配置されます。

-ms-box-pack:end の例
center

start キーワードや end キーワードと同じようにすべての子要素が端を揃えて配置されますが、それらの子要素のグループが親要素の開始エッジと終了エッジの間の中央の位置に配置されます。すべての余白が最初の子要素の前と最後の子要素の後に均等に分配されます。

-ms-box-pack:center の例
justify

最初の子要素の開始エッジが親要素の開始位置に揃えて配置され、最後の子要素の終了エッジが親ボックスの終了位置に揃えて配置されます。残りのすべての子要素は、最初の子要素と最後の子要素の間に、レイアウト軸の方向の余白が子要素間で均等に分配されるようにして配置されます。

-ms-box-pack:justify の例

応用

  • クリックしたらそのパネルが大きくなるエフェクト

Flexアイテムの「伸びる」倍率を示す、flex-growをhoverで発火させることによって実現させる。

 &:hover{
      flex-grow: 1.8;
      transition: flex 0.2s;
  }

Flex Selection #2 CSS Hover Effect

f:id:serendipity4u:20170619223727p:plain

f:id:serendipity4u:20170619223758p:plain