[CSS]Flexboxのこれが知りたかった!今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ

今まで出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックを紹介します。

サイトのキャプチャ

Solved by Flexbox
Solved by Flexbox -GitHub

各コードの対応ブラウザは、Flexboxを使用しているため下記の通りです。

  • Chrome 21+
  • Opera 12.1+
  • Firefox 22+
  • Safari 6.1+
  • IE 10+

コードのライセンスはMITライセンスです。

「clearfix」「overflow: hidden」から卒業

Flexboxは複数のアイテムをコンテナ内に水平・垂直に一列に配置することができ、順番を変更するのも簡単です。テキストが画像に回り込むレイアウトなども、Flexboxでは簡単でシンプルなコードで実装できます。

デモのキャプチャ

Media Object
source -GitHub

HTML

画像とテキスト、あとはコンテナだけのシンプルなコードです。

CSS

「display: flex;」を指定し、「align-items: flex-start;」でコンテナの始点に配置させます。

Flexboxの各プロパティの使い方は、下記を参考に。

高さが分からないフッタを常に最下部に表示

フッタの表示をコンテンツの量が少なくても、常に最下部に表示します。
Flexboxを使わないテクニックではフッタに高さを指定しないと機能しませんでしたが、Flexboxを使うと高さが不明でも機能します。
参考: フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック

デモのキャプチャ

Sticky Footer
※コンテンツの量を少なくする時は、「Toggle Contetns」をクリックしてください。
source -GitHub

HTML

ヘッダ・コンテンツ・フッタのシンプルな構造です。

CSS

全体をViewport Heightで指定し、Flexboxでフッタを配置します。
参考: ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

高さが分からない要素を天地左右の中央に配置

高さが分からない要素を外側の容器の高さが不明でも天地左右の中央に配置します。

デモのキャプチャ

Vertical Centering
source -GitHub

HTML

.Alignerは天地左右の中央、.Aligner-item--topは上付き、.
Aligner-item--bottomは下付きです。

CSS

IE10+であれば、これが一番確実でシンプルです。

要素をビューポートの天地左右の中央に配置したい場合は、下記を参考に。

レスポンシブ対応の3カラムをシンプルなコードで実装

3カラム、左からメニュー、コンテンツ、広告スペースなどのレイアウトは、Flexbox以前は完璧な解決方法はありませんでした。

デモのキャプチャ

Holy Grail Layout
source -GitHub

3カラムの条件

  • サイドバーは固定で、コンテンツは可変。
  • コンテンツのコードが、HTMLソースで最初に記述。
  • 3つのカラムの高さは、最も高いものに揃える。
  • マークアップは最小で。
  • コンテンツが少ない時、フッタはページの最下部に表示。

HTML

HTMLは非常にシンプルで、3カラムの中でコンテンツが最初に記述されます。

CSS

まずは、フッタの表示をコンテンツが少ない時でも最下部に表示されるように指定。

3カラムはコンテンツを可変に、3つのカラムの高さを揃えます。

ついでに、レスポンシブ対応にしましょう。
モバイルファーストでスマホ用からレイアウトします。スマホ時には3カラムの表示を上から順にメニュー、コンテンツ、広告スペースにします。

Flexboxを使った柔軟なグリッド

Flexboxを使って、柔軟なグリッドを実装します。

デモのキャプチャ

Simpler Grid System
source -GitHub

HTML

Flexboxを使ったグリッドの基本構成は、アイテムとそれらを内包するコンテナです。

CSS

ベースとなるグリッドシステムです。

Flexboxではさまざまなプロパティが用意されており、溝や順番や配置を簡単に指定できます。

レスポンシブ対応も非常に簡単です。

Flexboxの各プロパティの使い方は、下記を参考に。

入力フィールドとボタンの高さを揃えて、くっつけて配置

フルサイズの可変で、しかも高さが揃った入力フィールドとボタンのセットを実装することは、今まで不可能でした。しかし、Flexboxを使うと、驚くほどシンプルなコードでこれを実装できます。

デモのキャプチャ

Input Add-ons
source -GitHub

HTML

入力フィールドとボタンはどちらが前で後ろでも前後でも、同じ高さで実装できます。

CSS

スタイルシートは非常にシンプルです。あとは入力フィールドとボタンのスタイルを指定してください。

top of page

©2016 coliss