CHROMA

世の中の "当たり前" を確認する

Flexbox の概要をみる

Dev

Flexbox を使うには

  1. display:flex; を指定して Flexbox コンテナー をつくる
  2. Flexbox コンテナーの子要素は Flexbox アイテム となる

Flexbox アイテムでは、 Flexbox アイテム用の CSS プロパティが使えるようになる。

HTML はこんな感じになるのかな:

<div class="flexbox-container">
  <div class="flexbox-container-item">
    <p>1Hoge Get!</p>
  </div>
  <div class="flexbox-container-item">
    <p>2 Hoge Get!</p>
  </div>
  <div class="flexbox-container-item">
    <p>3 Hoge Get!</p>
  </div>
  <div class="flexbox-container-item">
    <p>4 Hoge Get!</p>
  </div>
  <div class="flexbox-container-item">
    <p>5 Hoge Get!</p>
  </div>
</div>

Flexbox コンテナーに指定できるプロパティ

flex-direction プロパティでは子要素の配置方向を指定でき、値には以下のものが使えます:

  • row ... 左から順に横列配置
  • row-reverse ... 右から順に横列配置
  • column ... 上から順に縦列配置
  • column-reverse ... 下から順に縦列配置

flex-wrap プロパティでは子要素の折り返し設定が行え、値には以下のものが使えます:

  • nowrap ... 折り返しなしで単一行に表示する
  • wrap ... 折り返しを行い、複数行で表示する
  • wrap-reverse ... wrap と折り返し地点を逆にして複数行で表示する

flex-flow プロパティでは flex-direction と flex-wrap の指定をまとめて行うことができます。

justify-content プロパティでは flex-direction で指定した子要素の配置方向をベースに、様々なレイアウト揃えを行えます。値には以下のものが使えます:

  • flex-start ... 左揃え
  • flex-end ... 右揃え
  • center ... 中央揃え
  • space-between ... 両端の余白をとらず、Flexbox コンテナーいっぱいを使って各 Flexbox アイテムの間隔を均等に空ける
  • space-around ... 両端の余白もとり、各 Flexbox アイテムの間隔を均等に空ける

align-items プロパティでは justify-content の垂直方向の軸のレイアウト揃えを行えます。値には以下のものが使えます:

  • flex-start ... 横列配置の場合は上揃え、縦列配置の場合は左揃え
  • flex-end ... 横列配置の場合は下揃え、縦列配置の場合は右揃え
  • center ... 中央揃え
  • baseline ... ベースラインに合わせてレイアウトを揃えます
  • stretch ... Flexbox アイテムに高さが設定されていれば、高さの最大まで領域をとる。高さが設定されていなければ、 Flexbox アイテムの最大の高さものに他のものも高さを合わせる

align-content プロパティでは複数行のときに行揃え設定できます。値には以下のものが使えます（ほとんど justify-content プロパティと同じです）:

  • flex-start ... 横列配置の場合は上揃え、縦列配置の場合は左揃え
  • flex-end ... 横列配置の場合は下揃え、縦列配置の場合は右揃え
  • center ... 中央揃え
  • space-between ... 上下の余白をとらず、Flexbox コンテナーいっぱいを使って各 Flexbox アイテムの間隔を均等に空ける
  • space-around ... 上下の余白もとり、各 Flexbox アイテムの間隔を均等に空ける

Flexbox アイテムに指定できるプロパティ

flex プロパティでは flex-grow と flex-shrink と flex-basis の 3つの指定をショートハンドでまとめて設定できます。
指定する順番はこんな感じです:

flex: {flex-grow} {flex-shrink} {flex-basis};

各プロパティについては以下のとおりです:

  • flex-grow ... Flexbox アイテムの伸びる倍率。負の値は指定できません
  • flex-shrink ... Flexbox アイテムの縮む倍率。負の値は指定できません
  • flex-basis ... ベースとなるサイズを指定します

align-self プロパティでは個別の Flexbox アイテム に対して垂直揃えを行えます。値には align-items プロパティで指定できるものと同じものが指定できます。

order プロパティでは Flexbox アイテムの順序指定ができます。

参考