Skip to content

Flexboxの基本仕様とプロパティまとめ

Flexbox (Flexible Box) とは、その名の通り、柔軟に伸び縮みするボックスを使ったレイアウトのことです。

親要素の隙間を埋めるように伸ばしたり、親要素からはみ出す分を縮めるといった、自由度の高いレイアウトが可能になります。

また、軸という概念が採用されているため、要素の並ぶ方向も自由に設定することが可能になっています。

これまでは主に左上から右下へ並べるしかできなかったものを、上から、下から、右から、左から、自由に並べることが可能になっています。

参考サイト

CSS Flexible Box Layout – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

A Complete Guide to Flexbox | CSS-Tricks
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

基本的な概念

Flexbox には、これまでのレイアウト手法とは異なる概念が必要になります。

それぞれの概念に関連するプロパティも上げていますが、プロパティについては後ほど詳しく紹介いたします。

Flex container (Flex コンテナ)

要素を Flex container に指定すると、それに囲まれた要素は Flex item となり、Flexbox のルールに従った柔軟なレイアウト制御が可能になります。

関連プロパティ

  • display: flex;
  • display: inline-flex;

display: flex; を指定することで、その要素を Flex container とすることができます。

display: inline-flex; は、例えばアイコンとテキストを Flexbox で縦に並べたボタンをテキスト中に表示させたい、といったときなどに指定します。

Flex item (flex アイテム)

Flex container の子要素が Flex item にあたり、この要素は Flex container に定義された主軸、交差軸に基づいて配置されるようになります。

Flex container を設定すればその子要素は自動的に Flex item として扱われることになるため、プロパティを指定する必要はありません。

ホワイトスペース以外のテキストノードも対象となります。

Axis (軸)

Flexbox では要素の並び順に、通常の垂直方向、水平方向といった概念ではなく、軸という概念が適用されています。

例えば <div> や <span> を並べると、<div> は上から下、<span> は左から右、のように配置されていきます。

しかし Flexbox が適用される範囲ではこの法則は成り立たなくなり、Flexbox ごとに定義された軸とその方向にもとづいて要素が配置されるようになります。

軸には主軸( main axis )と交差軸( cross axis )があり、デフォルトの始点終点の方向は、主軸が左から右、交差軸が上から下となっていますが、この方向は4種類用意されており、プロパティの指定で制御することができます。

関連プロパティ

  • flex-direction :主軸の方向
  • flex-wrap :交差軸の方向(主な役割は折り返しの制御ですが、軸の制御という役割もあります)
  • flex-flow :flex-direction, flex-wrap のショートハンド
  • justify-content :子要素群の 主軸方向の配置
  • align-content :子要素群の交差軸方向の配置
  • align-items :子要素の交差軸方向の配置
  • align-self :align-items と同様。align-items より優先される

主軸、交差軸の定義方法

flex-direction と flex-wrap によって主軸、交差軸の方向が決定されます。

※アラビア語やヘブライ語など、Right To Left の環境では左右は逆になります。

  • flex-flow: row wrap(nowrap)
    • 主軸:左から右(→)、交差軸:上から下(↓)
  • flex-flow: row-reverse wrap(nowrap)
    • 主軸:右から左(←)、交差軸:上から下(↓)
  • flex-flow: row wrap-reverse
    • 主軸:左から右(→)、交差軸:下から上(↑)
  • flex-flow: row-reverse wrap-reverse
    • 主軸:右から左(←)、交差軸:下から上(↑)
  • flex-flow: column wrap(nowrap)
    • 主軸:上から下(↓)、交差軸:左から右(→)
  • flex-flow: column-reverse wrap(nowrap)
    • 主軸:下から上(↑)、交差軸:左から右(→)
  • flex-flow: column wrap-reverse
    • 主軸:上から下(↓)、交差軸:右から左(←)
  • flex-flow: column-reverse wrap-reverse
    • 主軸:下から上(↑)、交差軸:右から左(←)

Dimension (寸法)

Flex item ではその寸法の定義において、通常の width, height に加え、その要素の伸び縮み量を指定することができます。

関連プロパティ

  • flex-basis :拡大、縮小される前の主軸方向の寸法
  • flex-grow :要素の拡大比率
  • flex-shrink :要素の縮小比率
  • flex: flex-grow + flex-shrink + flex-basis のショートハンド

Flex item は width, height, flex-basis などに基づいた寸法で配置されたのち、Flex container に残った余白や、

Flex container からのはみ出し分がflex-grow, flex-shrink で指定した比率で配分され、最終的な寸法が決定されます。

Flexbox 概念まとめ

  • Flexbox レイアウトでは、主軸、交差軸の方向に基づいた順番で Flex item が配置されます。
  • Flexbox レイアウトでは、Flex item は基本となる寸法と、そこからの伸び縮みの量によって最終的な寸法が決定されます。

Flex item についての注意事項

  • 読み上げやナビゲーションの順序には影響しません。
  • 隣接する Flex item の margin は相殺されません。上下の margin であっても相殺は発生しません。
  • float, clear, vertical-align は機能しません。

プロパティまとめ

Flexbox には、順序、配置、寸法を指定するプロパティがあり、Flex container に指定するものと、Flex item に指定するものの2種類があります。

flex-direction (主軸の方向)

  • Flex container に指定
  • 主軸の方向を定義
  • アニメーション不可
    • row
    • row-reverse
    • column
    • column-reverse

flex-wrap (折り返しの可否、交差軸の方向)

  • Flex container に指定
  • Flex item の行(列)数と、行(列)の方向を定義
  • アニメーション不可
    • nowrap
    • wrap
    • wrap-reverse

flex-direction に column を指定していた場合、行ではなく列の方向を定義することになります。

flex-flow (flex-direction + flex-wrap)

  • flex-direction + flex-wrap のショートハンド

justify-content (主軸方向の配置)

  • Flex container に指定
  • 主軸方向の Flex item の配置方法を定義
  • アニメーション不可
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around

space-between, space-around は、Flex container に余っているスペースを Flex item に均等に配分します。

このとき、space-between は両端を詰めるように余白が配分されます。

align-content (交差軸方向の配置)

  • 複数行(列)の Flex container に指定
  • 交差軸方向の各行(列)の配置方法を定義
  • アニメーション不可
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • stretch

Flex container の中で行(列)を交差軸方向にどのように配置するかを定義します。

Flex item の配置ではなく、行(列)の配置を指定するプロパティである点に注意してください。

align-items (交差軸方向の配置)

  • Flex container に指定
  • 交差軸方向の Flex item の配置方法を定義
  • アニメーション不可
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch

1行(列)の中で Flex item を交差軸方向にどのように配置するかを定義します。

align-self (交差軸方向の配置)

  • Flex item に指定
  • 交差軸方向の Flex item の配置方法を定義
  • アニメーション不可
    • auto
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch

Flex container で指定された align-items を、Flex item ごとに上書きするプロパティです。

なお、交差軸方向に margin: auto; が指定されている場合は、このプロパティは無効になってしまうので注意が必要です。

flex-basis (主軸方向の寸法)

  • Flex item に指定
  • Flex container の余白、不足分を分配する前の、主軸方向の寸法を定義
  • アニメーション可
    • 絶対単位、または、Flex container の 寸法 に対するパーセント

auto を指定した場合、width または height の値が寸法になります。

flex-grow (主軸方向の伸長率)

  • Flex item に指定
  • Flex container の余白を、Flex item に分配する割合を定義
  • アニメーション可
    • 整数 or 少数

Flex container に余っているスペースは、Flex item ごとの flex-grow の比で Flex item に割り当てられ、Flex item はその分寸法が増えます。

つまり、例えば 200px の余白がある Flex container の中に Flex item が 3 つあり、それぞれの要素の flex-grow が 1, 1, 2 と定義されている場合、それぞれの Flex item は 50px, 50px, 100px 伸びることになります。

flex-shrink (主軸方向の縮小率)

  • Flex item に指定
  • Flex container の不足分を、Flex item に分配する割合を定義
  • アニメーション可
    • 整数 or 少数

flex-grow と対になるプロパティで、こちらは Flex item が縮む割合を定義します。

例えば 3つの Flex item に flex-shrink が 1, 1, 2 と設定されていて、Flex item の幅が Flex container よりも 200pxはみ出している場合、Flex item はそれぞれ 50px, 50px, 100px 縮むことになります。

flex (flex-grow + flex-shrink + flex-basis)

  • flex-grow + flex-shrink + flex-basis のショートハンド

order (順序)

  • Flex item に指定
  • 要素を配置する順序を定義
  • アニメーション可
    • 整数 or 少数

値の小さいものから順番に配置されます。

何気にアニメーション可です。

まとめ

以上が Flexbox 基本的なふるまいとプロパティになります。

参考サイトの説明は非常にわかりやすいので、ぜひそちらも参考にしてください。

Comments are closed.