これが知りたかった!よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル

Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。

2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。

Flexboxで実装されたUIエレメント

Flexbox Patterns
Flexbox Patterns -GitHub

Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。

以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

「display: flex;」からはじめよう

Flexboxの出発点は「display: flex;」プロパティです。
要素にこのプロパティを加えることで、あなたはFlexboxを使えるようになります。

「display: flex;」のプロパティが何をしていると思いますか?
このプロパティは、Flexコンテナの主軸(デフォルトで水平軸)に沿ってアイテム(子要素)を配置することを明示しています。
対応ブラウザは、下記の通り。

Flexboxの各ブラウザのサポート状況

Flexboxの各ブラウザのサポート状況 -Can I use

「display: flex;」がどのように機能するか、UIコンポーネントを作るためにどのように使うか、見てみましょう。

01. 要素を水平に配置する

まずは、シンプルな「ステッパー インプット」です。
これはJavaScriptを使用すると、「-」で値を減少させ、「+」で値を増加させます。

Flexboxで実装されたステッパー インプット

通常これを実装する時は、ボタンをインライン化させ、入力フィールドに「display: inline-block;」を加え、「float: left;」で配置するでしょう。しかし、この表示結果を実現するにはそれらの要素両方ともに特定のセレクタが必要となります。
Flexboxを使用すると、そのセレクタは必要ありません。

コンテナに「display: flex;」を加えるだけで、同じ効果を達成することができます。あとは、Flexboxの仕様通りに、アイテムが水平軸に沿って並べられます。
これはFlexboxの基本で、コンテナの中にアイテムを左から右に主軸に沿って配置します。

HTML

コンテナは「.stepperInput」で、アイテムはbuttonが2つとinputが1つです。

SCSS

コンテナに「display: flex;」を指定します。
あとは、ただの装飾です。

02. Flexboxで実装する「タブ」

「display: flex;」はかなり用途が広いプロパティです。
タブも上記と同じ方法で実装できます。

Flexboxで実装されたタブ

HTML

コンテナは「.tabs」です。

SCSS

コンテナに「display: flex;」を指定することで、アイテムである各タブを左から右に主軸(水平軸)に沿って配置します。

03. Flexboxで実装する「ヘッダ」

左から右に沿って配置するだけでなく、今度は切り離して配置してみましょう。

ここにあるヘッダのアイテムは、ロゴ、ナビゲーション、Settingボタンの3つで構成されています。

Flexboxで実装されたヘッダ

通常これを実装する時は、ロゴとナビゲーションの2つをラッパーで包み、フロートを使い、そのラッパーを左に、ボタンを右に配置するでしょう。もちろん、clearfixも必要です。
Flexboxを使うと簡単に、そしてシンプルに実装できます。

Flexboxを使う時にもラッパーは必要とします。Flexboxは配置する時に親要素(コンテナ)が必要だからです。しかしこのコンテナに特別なclassは必要なく、clearfixも必要ありません。

HTML

ロゴとナビゲーションの2つ、ボタンの1つを包むコンテナを用意します。

SCSS

ヘッダ全体のコンテナ「.siteHeader」、子要素のグルーピング用のコンテナ「.siteHeader__section」に、「display: flex;」を指定します。

そして、2つの新しいプロパティを使います。
ヘッダ全体のコンテナに「justify-content: space-between;」を指定し、最初と最後のアイテムを両端に、残りは等間隔で配置します(この例では残りのアイテムはありません)。
グルーピング用のコンテナに「align-items: center;」を指定し、コンテナのクロス軸の中央に配置します。

04. Flexboxで実装する「フォームのフッタ」

フォームのフッタに、進捗状況のスピナーを必要とするかもしれません。
これは異なる情報構造のものが並ぶ状態で、フォームのボタンとスピナーはマークアップの構造上、分けて配置されています。

Flexboxで実装されたフォームのフッタ

HTML

アイテムはスピナーとフォームのボタン2つ、それぞれのコンテナを用意します。

SCSS

全体のコンテナには、最初と最後のアイテムを両端に、クロス軸の中央に配置します。
スピナー、フォームのボタンはクロス軸の中央に配置します。

05. Flexboxで実装する「サイドバー」

ここまでは水平軸に沿って配置してきましたが、今度は垂直軸に沿って配置してみましょう。
よく見かけるサイドバーに配置されたナビゲーションを実装します。

Flexboxで実装されたサイドバー

一見、div要素を上から並べるだけで実装できるように見えますが、「Legal」が最下部にあるため、div要素を上から並べるだけではできません。
この場合、Flexboxを使うと非常に簡単に実装できます。

まずはコンテナに「display: flex;」を加え、最初と最後のアイテムを両端に配置する「justify-content: space-between;」を使います。そして、水平軸ではなく、垂直軸にするために「flex-direction: column;」を使用します。

HTML

上3つのアイテムと下1つのアイテムにコンテナを用意します。

SCSS

「flex-direction: column;」を使用すると、アイテムは上から下に垂直方向に配置されます。

06. Flexboxで実装する「天地左右の中央に配置」

水平軸と垂直軸が使えるようになったので、今度は天地左右の中央に配置してみましょう。

Flexbox無しで実装するには、絶対配置や2Dの変形で相殺するなど、若干のCSSハックを伴います。Flexboxで実装すると、コンテナに4つのプロパティを使うだけです。

Flexboxで実装された天地左右の中央に配置

HTML

コンテナ「.centeredPrompt」を天地左右の中央に配置します。

SCSS

天地左右の中央に配置するコンテナに必要なのは、4つのプロパティだけ。

  • 「display: flex;」: コンテナに必ず指定します。
  • 「flex-direction: column;」: コンテナの主軸の方向を設定します。
  • 「align-items: center;」: アイテムをコンテナのクロス軸の中央に配置します。
  • 「justify-content: center;」: アイテムをコンテナの中央に配置します。

07. Flexboxで実装する「アイコンを中央に配置」

天地左右の中央に配置」と同様にプロパティを使用して、ある要素の天地左右の中央に配置することもできます。

Flexboxで実装されたアイコンを中央に配置

HTML

div要素のサークルに、アイコンを配置します。

SCSS

コンテナに使用するプロパティは、同じです。

08. Flexboxで実装する「フィーチャーリスト」

フィーチャーリストとは、プロダクトやサービスの特徴を画像やテキストなどで記載したコンポーネントです。

Flexboxで実装されたフィーチャーリスト

上記のように互い違いに配置されたレイアウトも、Flexboxを使うと簡単に実装できます。

HTML

アイコンとテキストをセットにして、コンテナで内包します。

SCSS

ここでのポイントは「flex-direction: row-reverse;」です。
このプロパティを与えたコンテナは、アイテムを右から左へ(rtl)水平方向に配置します。

09. Flexboxで実装する「カード」

09と10で、Flexboxを使った少し複雑なレイアウトに挑戦してみましょう。

Flexboxで実装されたカード

カードを実装するには、ここまでに使ったプロパティで大丈夫です。

  • display: flex;
  • flex-direction: column;
  • align-items: center;
  • justify-content: center;

垂直の主軸に沿ってアイテムを配置し、各アイテムは中央に揃えます。

HTML

アイコンとテキスト、価格の2つでコンテナを分けます。

SCSS

垂直方向にする「flex-direction: column;」がポイントです。
各子コンテナには、「align-items: center;」と「justify-content: center;」で天地左右の中央に配置します。

10. Flexboxで実装する「カードの複数配置」

いよいよ、最後のチュートリアルになりました。
カードを複数配置し、カードグループのコンポーネントを作成します。実装のポイントは、2つです。

  1. カードの幅は、その内容の量に関わらず同じサイズにします。
  2. カードの高さも同様に同じサイズにします。

これをFlexbox無しで実装するには、全部のカードを一つのtable要素にするか、全部のカードを絶対位置で配置してサイズを%とpxの両方を算出して適用するかでしょう。
Flexboxを使うとこれは非常に簡単です、ただし新しいプロパティを使用します。ここまではコンテナのプロパティでしたが、アイテムに適用するプロパティです。

Flexboxで実装されたカードの複数配置

HTML

HTMLの構造は、全部のカードを内包するコンテナが加わります。

SCSS

まずはカードのコンテナ「.cardGroup__card」に、「flex: 1 1 0;」指定します。これはコンテナの中で幅を等しくします。この3つの数字は、下記の3つのプロパティのショートハンドです。

  • 「flex-grow: 1;」: フリーのポジティブなスペースがある場合にアイテムが他のアイテムと比較してどのくらいの大きさになるかを指定します。
  • 「flex-shrink: 1;」: フリーのネガティブなスペースにコンテナ内のアイテムが残りのアイテムと比較してどのくらい縮まるかを指定します。
  • 「flex-basis: 0;」: コンテナ内の残りのスペースが適用される前にアイテムのサイズを決定します。「0」にセットすることで、アイテムのサイズはコンテナのサイズによって決定されます。

この指定で1つ目の条件を満たし、すべてのカードの幅が同じになります。

2つ目の条件の高さを揃えるためには、この指定に少し手を加え、「 flex: 1 1 auto;」と記述します。

  • 「flex-basis: auto;」: アイテムの最初のメインとなるサイズを元に、幅と高さのプロパティを同じ値にします。

top of page

©2016 coliss
o