横並びレイアウトはfloatをやめてFlexboxに切り替えよう！縦中央揃えやMasonryの代替にも使える！ [基本編]

2017.12.15

皆さんは横並びメニューを作るときどんな方法で行っていますか？
定番のfloat？それともinline-block？

今回ご紹介するFlexboxは、数行のシンプルな命令で簡単にフレキシブルなレイアウトを実現できる、新しいレイアウト手法です。
それまで、横並び要素の高さ揃えや縦中央配置で苦労していた私には目からウロコものでした！グリッド・レイアウトにも適し、レスポンシブデザインとの親和性が高いのも特徴ですね。

CSS3から追加された新機能なので、ChromeやFirefoxなどのモダンブラウザでは問題なく使えるのですが、Internet Explorer 9(以下IE)以前ではほぼ使えません。
(一応、IE8やIE9でFlexboxを使えるようにするjavascriptはありますが、Microsoft自身が古いIEの打ち切りを宣言しているので対応する必要性は低いでしょう)
何度かの仕様変更を経てやっと定着してきたので、そろそろ普通に使っても良い頃合いかな？と思います。

01.Flexboxでできること

まずはFlexboxで出来ることを実用面から端的に書き出しますと・・・

  • 今までfloatやinline-blockで作っていた横並びのメニューを簡単に作成！

  • ネガティブマージンに頼らず、異なる高さの要素の高さを揃えられる！

  • 「display:table-cell」やpositionに頼っていた要素内の縦中央配置が簡単！

  • 「Masonry」や「isotope」のグリッド・レイアウトを高速かつ簡単に実現！

  • レスポンシブデザインを考慮した変形するカラム・レイアウトを手軽に可能！

などなど。あまりに便利なので、私なんかはメニューのみならず、グリッド・レイアウトやパンくずリストの果てまで、Flexboxだらけにしてしまったほどです(笑)普通のサイドバーを使った2ペインや3ペインのカラム・レイアウトでも便利な機能がいっぱいですよ。
まさにオールマイティなこれからのレイアウト手段です。

今回はFlexboxの使い方を解説した基本編と、実際にどのようなシーンで使うのかを提案する実用編の二回に分けて連載したいと思います。

02.Flexboxの基本

Flexboxの効果は実際に見てもらった方が分かりやすいので、とりあえず横並びのメニューを作ってみましょう。今まで通りfloatで作るとしたら、全体を囲むリストULの中の子要素LIを「float:left」にして横並びにする所です。

HTML

CSS

#menu{
display: flex;
}
#menu li{
color: #fff;
margin: 10px;
padding: 15px;
border-radius: 4px;
background: #60B99A;
}

RESULT

これだけで、横並びのメニューができました。floatしているワケではないのでクリアする必要もなく、非常にシンプル。 でも、ここまでならinline-blockでも可能です。

ちなみに、Flexboxでは効果が適用されるボックスモデル(全体を包むもの)を「Flexboxコンテナ」と呼びます。やり方は要素を包括するDIVやULに「display:flex」を記述するだけのシンプルなものです。「Flexboxコンテナ」の中にある子要素は「Flexboxアイテム」と呼ばれます。

これらの「Flexboxコンテナ」と「Flexboxアイテム」に様々なプロパティを与えて、多様なレイアウトを実現していきます。

03.Flexboxコンテナのプロパティ

「flex-direction」～アイテムの配置方向～

Flexboxでは「flex-direction」によってアイテムの配置方向を決めることができます。

row

アイテムは左から右に水平方向に配置されます。「flex-direction」の初期値です。

CSS

#menu{
flex-direction: row;
}

RESULT

row-reverse

rowとは逆にアイテムは右から左に水平方向に配置されます。

CSS

#menu{
flex-direction: row-reverse;
}

RESULT

column

columnではアイテムは上から下へ垂直方向に配置されます。

CSS

#menu{
flex-direction: column;
}

RESULT

column-reverse

columnとは逆にアイテムは下から上へ垂直方向に配置されます。

CSS

#menu{
flex-direction: column-reverse;
}

RESULT

「flex-wrap」～アイテムの折り返し～

「flex-wrap」は1行に複数のアイテムを配置するのか、折り返し(改行)を行い複数の行に配置するのかを選択することができます。
詳しく説明すると、アイテムの合計幅がコンテナの長さ超えないようにするのか、floatのように複数アイテムの幅がコンテナを超えたときに折り返すのかを設定します。実用する場合は、メニューやカラム・レイアウト等では1行に全てのアイテムを収め、グリッド・レイアウトのようなモデルで使いたいときは複数行を選択します。

nowrap

折り返しを行わず、1行に全て収めます。「flex-wrap」の初期値です。

CSS

#menu{
flex-wrap: nowrap;
}
#menu li{
width: 30%;	/*わざとはみ出るように横幅を広げます*/
}

RESULT

wrap

float:leftを指定した時と同じように左から右、上から下へと折り返します。

CSS

#menu{
flex-wrap: wrap;
}
#menu li{
width: 30%;	/*わざとはみ出るように横幅を広げます*/
}

RESULT

wrap-reverse

wrapと同じ挙動ですが、下から上へと折り返します。

CSS

#menu{
flex-wrap: wrap-reverse;
}
#menu li{
width: 30%;	/*わざとはみ出るように横幅を広げます*/
}

RESULT

「flex-flow」～flex-direction と flex-wrapをまとめて設定～

「flex-flow」は「flex-direction」と「flex-wrap」をまとめて設定できるショートハンドです。
たとえば、float:rightのように右から左に配置して、なおかつ折り返しは下から上といった配置をまとめて設定する場合は、下記のように記述します。

CSS

#menu{
flex-flow: row-reverse wrap-reverse;
}
#menu li{
width: 30%;	/*わざとはみ出るように横幅を広げます*/
}

RESULT

「justify-content」～アイテムの水平方向の配置方法～

「justify-content」でアイテムの水平方向の配置を柔軟に変更する事ができます。間隔の均等割り付けなども可能なので、後述する「align-items」と合わせて、Adobe Illustratorのオブジェクトの整列のように使えます。

flex-start

横配置にしている場合は左に揃って配置、縦配置にしている場合は上に揃って配置になります。
「justify-content」の初期値です。

CSS

#menu{
justify-content: flex-start;
}

RESULT

flex-end

横配置にしている場合は右に揃って配置、縦配置にしている場合は下に揃って配置されます。

CSS

#menu{
justify-content: flex-end;
}

RESULT

center

アイテムはコンテナの中央に配置されます。ここまではテキストの扱いと似ていますね。

CSS

#menu{
justify-content: center;
}

RESULT

space-between

最初と最後のアイテムは端っこに配置、残りのアイテムは等間隔に配置されます。

CSS

#menu{
justify-content: space-between;
}

RESULT

space-around

全てのアイテムが等間隔に配置されます。最初と最後のアイテムの左右にも間隔が空きます。

CSS

#menu{
justify-content: space-around;
}

RESULT

「align-items」～アイテムの垂直方向の配置方法～

「justify-content」が水平方向の配置なのに対して「align-items」は垂直方向の配置を設定します。
「align-items」を使うと、今まで難しかったボックスモデルの高さを揃えたり、垂直方向の中央揃えが簡単に実現できます。これは便利！

flex-start

横配置にしている場合は上に揃って配置、縦配置にしている場合は左に揃って配置になります。

CSS

#menu{
align-items: flex-start;
}

RESULT

flex-end

横配置にしている場合は下に揃って配置、縦配置にしている場合は右に揃って配置になります。

CSS

#menu{
align-items: flex-end;
}

RESULT

center

アイテムはコンテナの中央に配置されます。
従来の方法では、横並びのボックスモデルで表現するのが難しかった表現です。
Flexboxではいとも簡単に実現できてしまいました。

CSS

#menu{
align-items: center;
}

RESULT

baseline

アイテムはベースラインを基準に揃えられます。

CSS

#menu{
align-items: baseline;
}

RESULT

stretch

一番高さ(もしくは幅)のあるアイテムに合わせて、拡大されます。
これも従来の方法では難しかった表現でしたが、わずか1行で実現できるのは喜ばしいですね。
ちなみに、こちらが「align-items」のデフォルト値となっております。

CSS

#menu{
align-items: stretch;
}

RESULT

「align-content」～複数行の垂直方向の揃え方～

「justify-content」と似ていますが「flex-wrap」を「nowrap」以外にして複数行になった場合の垂直方向の配置に適用されます。

flex-start

横配置にしている場合は上に揃って配置、縦配置にしている場合は左に揃って配置になります。

CSS

#menu{
flex-wrap: wrap;
align-content: flex-start;
height: 200%;	/*分かりやすいようにコンテナの高さを広げます*/
}
#menu li{
width: 20%;	/*わざとはみ出るように横幅を広げます*/
}

RESULT

flex-end

横配置にしている場合は上に揃って配置、縦配置にしている場合は左に揃って配置になります。

CSS

#menu{
flex-wrap: wrap;
align-content: flex-end;
height: 200%;	/*分かりやすいようにコンテナの高さを広げます*/
}
#menu li{
width: 20%;	/*わざとはみ出るように横幅を広げます*/
}

RESULT

center

コンテナの中央に配置されます。

CSS

#menu{
flex-wrap: wrap;
align-content: center;
height: 200%;	/*分かりやすいようにコンテナの高さを広げます*/
}
#menu li{
width: 20%;	/*わざとはみ出るように横幅を広げます*/
}

RESULT

space-between

最初と最後のアイテムは端っこに配置、残りのアイテムは等間隔に配置されます。

CSS

#menu{
flex-wrap: wrap;
align-content: space-between;
height: 200%;	/*分かりやすいようにコンテナの高さを広げます*/
}
#menu li{
width: 20%;	/*わざとはみ出るように横幅を広げます*/
}

RESULT

space-around

全てのアイテムが等間隔に配置されます。最初と最後のアイテムの左右にも間隔が空きます。

CSS

#menu{
flex-wrap: wrap;
align-content: space-around;
height: 200%;	/*分かりやすいようにコンテナの高さを広げます*/
}
#menu li{
width: 20%;	/*わざとはみ出るように横幅を広げます*/
}

RESULT

stretch

一番高さ(もしくは幅)のあるアイテムに合わせて、拡大されます。
こちらが「align-content」のデフォルト値となっております。

CSS

#menu{
flex-wrap: wrap;
align-content: stretch;
height: 200%;	/*分かりやすいようにコンテナの高さを広げます*/
}
#menu li{
width: 20%;	/*わざとはみ出るように横幅を広げます*/
}

RESULT

ここまでが現時点の「Flexboxコンテナ」のプロパティとなります。

04.Flexboxアイテムのプロパティ

「flex-grow」～アイテムの伸び率～

「flex-grow」はコンテナに対して、設定したアイテムの幅が他と比較してどのくらい伸びるかを指定できます。
その伸縮は自動的に行われます。デフォルト値は0です。

HTML

CSS

#menu{
width: 100%;
}
#menu li{
width: 10%;	/*フリースペースを残すために小さくしています*/
}
.glow{
flex-grow:5;
}

RESULT

「flex-shrink」～アイテムの縮む率～

「flex-grow」はコンテナに対して、設定したアイテムの幅が他と比較してどのくらい縮むかを指定できます。
その伸縮は自動的に行われます。デフォルト値は0です。

HTML

CSS

#menu{
width: 100%;
}
#menu li{
width: 20%;	/*全体に広がるように大きくしています*/
}
.shrink{
flex-shrink:5;
}

RESULT

「flex-basis」～アイテム幅の最小値を設定～

「flex-basis」はアイテム幅の最小値を設定できます。デフォルト値はautoです。

HTML

CSS

#menu{
width: 100%;
}
.basis{
flex-basis:20%;
}

RESULT

「flex」～flex-grow、flex-shrink、flex-basisをまとめる～

「flex」は「flex-grow」「flex-shrink」「flex-basis」をまとめて設定できるショートハンドです。

CSS

.flex{
flex: 0 1 auto;
}

上ではすべてデフォルト値で設定しております。

「align-self」～アイテムの垂直方向の配置方法～

基本的には「align-items」と同じですが、こちらは個別の「Flexアイテム」に対して設定します。
プロパティは「align-items」をご参照ください。優先順位は「align-items」よりも高くなります。

HTML

CSS

#menu{
align-items: flex-start;
}
.self_center{
align-self: center;
}
.self_stretch{
align-self: stretch;
}

RESULT

「order」～アイテムの順番指定～

通常、FlexboxアイテムはHTMLの順番通りに並びますが、「order」を使うことによって、その順番を入れ替えることが可能です。マイナスの値を入れると前方に移動し、プラスの値を入れると後方に移動します。レンダリングされた結果(見た目)が変わるだけなので、実際の順番に変更はありません。JavaScriptと組み合わせたりする場合はご注意ください。 デフォルト値は0(=現在の位置)です。

HTML

CSS

#menu{
align-items: flex-start;
}
.order01{
order: -2;
}
.order02{
order: 1;
}

RESULT

以上がFlexboxの基本プロパティとなります。
次回はこちらを踏まえて、実際に横並びメニューやグリッド・レイアウトで使う場合の方法を記載いたします。

Copyright © 2017, Mo-ja.net All Rights Reserved.
       

関連記事

Flexboxの均等割り付けをCSSのみで左揃えにする方法

CSSのみでふわふわ浮かぶアニメーションを作ってみる

｢Where did they go from here｣でWelcartに｢この商品を見た人はこんな商品も見ています｣機能を追加！ Welcart補完計画 [3]

｢Last Viewed Posts｣でWelcartに｢最近チェックした商品｣機能を追加！ Welcart補完計画 [2]

｢WP Favorite Posts｣でWelcartに｢お気に入り｣機能を追加！ Welcart補完計画 [1]