Speaking Design

Blogブログ

【コピペ対応・チートシート付き】便利なはずなのにややこしいFlexboxまとめ:コンテナ編

【コピペ対応・チートシート付き】便利なはずなのにややこしいFlexboxまとめ:コンテナ編

スタイルシートのFlexbox(フレキシブルボックス)。
『Floatより便利』なんだけど『Floatより覚えづらい』と苦手意識を持ってませんか?

「コンテナとアイテム、どっちに何を書くのか迷う」
「プロパティが多すぎる」

このあたりをしっかり整理すれば、フレキシブルボックスは余裕です。

こちらのページでは、コンテナに関するフレキシブルボックス設定についてまとめてみましたので、コピペでどうぞ。文末にはチートシートもあります。
アイテム周りに関するフレキシブルボックスの設定はこちらで紹介しています。

目次

Flexbox(フレキシブルボックス)の考え方

Flexbox(フレキシブルボックス)は要素を並べる時に役立つCSS設定です。よく使うのは横並びの設定ですね。
実装する時には、一つの親要素(コンテナ:container)の中に並べたい子要素達(アイテム:item)を収めておく必要があります。

flexboxのイメージ
フレキシブルボックスのイメージ。1つのコンテナ要素の中に、並べたいアイテム要素を入れるのが基本

Flexboxがややこしい理由1:コンテナとアイテムのどっちに何を設定すればいいのか迷う

ざっくりですが、これは以下の考え方で検討がつけられます。

要素全体の並び順を設定したい時→親要素(コンテナ:container)に設定

例えば子要素全てを等間隔で並べたい、と言う時はコンテナ側で設定します。

要素固有の振る舞いを設定したい時→子要素(アイテム:item)に設定

特定の子要素の大きさや位置を設定したい時には、アイテム側で設定します。

Flexboxがややこしい理由2:プロパティのバリエーションがたくさんある

これは覚えて行くしかありません。
ということで順に見ていきましょう!

とりあえずFlexboxにしてみる / display:flexbox / inline-flex

ここからしばらく、以下のHTMLを想定して進めます。
ul要素がコンテナ、li要素がアイテムです。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

flexboxの指定(ブロック) / display:flexbox

コンテナに『display:flex』を設定するだけで、フレキシブルボックスを実装することができます。
デフォルトは横並びです。

ul{ display:flex; }
  • 1
  • 2
  • 3

flexboxの指定(インライン) / display:inline-flex

『display:flex』では、コンテナの振る舞いがブロックレベルになりますが、代わりに『display:inline-flex』とすると、インラインレベルになります。

ul{ display:inline-flex; }
  • 1
  • 2
  • 3

要素の並び方向:flex-direction

フレキシブルボックスを実装したコンテナにflex-directionプロパティを加えると、要素の並び方向や順序を設定することができます。

横並び(左→右) / flex-direction:row

デフォルト値です。一般的には左→右の横並びです。

ul{
  display:flex;
  flex-direction:row;
}
  • 1
  • 2
  • 3

横並び(右→左) / flex-direction:row-reverse

一般的には右詰めの横並びになります。

ul{
  display:flex;
  flex-direction:row-reverse;
}
  • 1
  • 2
  • 3

縦並び(上→下) / flex-direction:column

上→下の縦並びになります。

ul{
  display:flex;
  flex-direction:column;
}
  • 1
  • 2
  • 3

縦並び(下→上) / flex-direction:column-reverse

下→上の縦並びになります。

ul{
  display:flex;
  flex-direction:column-reverse;
}
  • 1
  • 2
  • 3

要素の折り返し:flex-wrap

flex-wrapを加えると、要素の折り返しについて設定することができます。

要素を折り返さない / flex-wrap:nowrap

デフォルト値です。
以下の例では、3つのli要素の幅のトータルが40%×3=120%(100%を超える)なので、本来なら折り返しが発生するはずですが『flex-wrap:nowrap』によって、1行に収まっています。

ul{
  display:flex;
  flex-wrap:nowrap;
}

li{
  width:40%;
}
  • 1
  • 2
  • 3

要素を折り返す / flex-wrap:wrap

以下の例では、3つのli要素の幅のトータルが40%×3=120%(100%を超える)なので、1行目に収まらなかった3番目の要素が次の行に折り返されています。

ul{
  display:flex;
  flex-wrap:wrap;
}

li{
  width:40%;
}
  • 1
  • 2
  • 3

要素を逆方向に折り返す / flex-wrap:wrap-reverse

逆方向から折り返して配置されます。

ul{
  display:flex;
  flex-wrap:wrap-reverse;
}

li{
  width:40%;
}
  • 1
  • 2
  • 3

flex-direction + flex-wrap = flex-flow

flex-flowは、flex-directionとflex-wrapを一度に設定することができるショートハンドです。
『flex-flow:flex-directionの値 + 半角スペース + flex-wrapの値』のように記述します。
(どちらか片方だけでもOK)

ul{
  display:flex;
  flex-flow:row-reverse wrap; /* flex-directionの値 + 半角スペース + flex-wrapの値 */
}

li{
  width:40%;
}
  • 1
  • 2
  • 3

要素の揃え方(横):justify-content

justify-contentを加えると、要素間の隙間の空け方を設定することができます。

要素を先に配置 / justify-content:flex-start

デフォルト値です。要素を先に配置して、残りが空きになります。

ul{
  display:flex;
  justify-content:flex-start;
}
  • 1
  • 2
  • 3

要素を後ろに配置 / justify-content:flex-end

要素を後に配置します。

ul{
  display:flex;
  justify-content:flex-end;
}
  • 1
  • 2
  • 3

中央揃え / justify-content:center

中央に要素が配置されます。

ul{
  display:flex;
  justify-content:center;
}
  • 1
  • 2
  • 3

等間隔に空ける / justify-content:space-between

両端に要素が来るように配置されます。

ul{
  display:flex;
  justify-content:space-between;
}
  • 1
  • 2
  • 3

要素間を空ける1 / justify-content:space-around

要素間を等分に空けます。

ul{
  display:flex;
  justify-content:space-around;
}
  • 1
  • 2
  • 3

要素間を空ける2 / justify-content:space-evenly

要素間を等分に空けます。

ul{
  display:flex;
  justify-content:space-evenly;
}
  • 1
  • 2
  • 3

あれ?space-aroundとspace-evenlyの違いは?

考え方がちょっとだけ違います。

space-aroundとspace-evenlyの違い
スペースの計算方法がちょっと違うのですね

要素の揃え方(縦):align-content

align-contentを加えると、要素間の縦の隙間の空け方を設定することができます。

伸ばす / align-content:stretch

デフォルト値です。要素をいっぱいに広げます。

ul{
  display:flex;
  align-content:stretch;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

要素を先に配置 / align-content:flex-start

要素を頭に配置します。

ul{
  display:flex;
  align-content:flex-start;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

要素を後に配置 / align-content:flex-end

要素を後ろに配置します。

ul{
  display:flex;
  align-content:flex-end;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

中央揃え / align-content:center

中央に配置されます。

ul{
  display:flex;
  align-content:center;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

等間隔にあける / align-content:space-between

必ず両端に要素が来るように配置されます。

ul{
  display:flex;
  align-content:space-between;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

等分に空ける1 / align-content:space-around

要素間を等分に空けます。

ul{
  display:flex;
  align-content:space-around;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

等分に空ける2 / align-content:space-evenly

要素間を等分に空けます。

ul{
  display:flex;
  align-content:space-evenly;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

space-aroundとspace-evenlyの違いは、justify-contentと同様なので省略します。

align-content + justify-content = place-content

place-contentは、align-contentとjustify-contentを一度に設定することができるショートハンドです。
『place-content:align-contentの値 + 半角スペース + justify-contentの値』のように記述します。

ul{
  display:flex;
  place-content:stretch space-between; /* align-contentの値 + 半角スペース + justify-contentの値 */
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

アイテム同士の整列:align-items

align-itemsを加えると、アイテム同士の整列位置を設定することができます。
ここからは、以下のHTMLをサンプルとします。

<ul>
  <li>1</li>
  <li>2<br>2</li>
  <li>3<br>3<br>3</li>
</ul>

要素を広げる / align-items:stretch

デフォルト値です。
要素をめいっぱいまで伸ばします。

ul{
  display:flex;
  align-items:stretch;
}
  • 1
  • 2
    2
  • 3
    3
    3

上端で整列 / align-items:flex-start

要素の上側で整列されます。

ul{
  display:flex;
  align-items:flex-start;
}
  • 1
  • 2
    2
  • 3
    3
    3

下端で整列 / align-items:flex-end

要素の下側で整列されます。

ul{
  display:flex;
  align-items:flex-end;
}
  • 1
  • 2
    2
  • 3
    3
    3

中央で整列 / align-items:center

要素の縦中央で整列されます。

ul{
  display:flex;
  align-items:center;
}
  • 1
  • 2
    2
  • 3
    3
    3

ベースラインで整列 / align-items:baseline

要素内のテキストのベースラインを揃えてくれます。

ul{
  display:flex;
  align-items:baseline;
}
  • 1
  • 2
  • 3

ちょっとわかりにくいと思うので、補助線を引いてみました。こんなイメージです。

align-items:baselineのイメージ
テキストの足元を基準に揃えてくれます

まとめ(チートシート)

最後に、本ページで紹介した内容のチートシートです。

flexbox(フレキシブルボックス)のチートシート

冒頭にも書いた通り、要素全体の設定はフレキシブルボックスのコンテナ側に設定します。
アイテム側では、それぞれの要素を個別設定するためのプロパティが用意されていますので、Flexboxアイテム編も合わせてご覧になってみてください。