リリイログ Written by Yumi Nakamura

フレックスボックスの用語とプロパティ

プログラミング


勉強をはじめたばかりの頃に、下記を書きました。
flexbox については、manaさんが、チートシートを配布してくださっているので、ダウンロードして印刷し、机の前に貼っています。
https://www.webcreatorbox.com/
日本語対応 flexbox チートシート

flexbox 用語

DIV要素を、フレックスアイテム(flexitem)
それを囲む親要素を、フレックスコンテナー(flexcontainer) と呼ぶ。

親要素に、display:flexを宣言すると、
主軸は、左から右。
交差軸は、上から下となる。

主軸と交差軸を意識することが大事。

フレックスコンテナー(flexcontainer)に設定できるプロパティ

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • align-content

flex-directionは主軸の方向を決める

  • flex-direction:row
  • flex-direction:row-reverse
  • flex-direction:column
  • flex-direction:column-reverse
  • flex-direction:row

flex-direction:row

初期値は row 。
主軸は、左から右。

flex-direction:row-reverse

主軸は右から左。

flex-direction:column

主軸は、上から下。
フレックスアイテム(flexitem)は、上から下へ縦に並ぶ。

flex-direction:column-reverse

主軸は、下から上。
フレックスアイテム(flexitem)は、下から上へ縦に並ぶ。

justify-contentは主軸に沿って要素をいかに並べるかを決める

flex-direction:row がまず宣言されている時

justify-content:flex-start

主軸は左から右なので、左揃えで、要素が並べられる。

justify-content:flex-end

主軸は左から右なので、右揃えで、要素が並べられる。

justify-content:center

主軸にそって、中央に要素が並べられる。

justify-content:space-between

主軸にそって、要素間に空白が配置され、均等に並べられる。

align-itemsは交差軸に沿って要素をいかに並べるかを決める

flex-direction:row がまず宣言されている時

align-items:flex-start

交差軸の始点なので、上揃えに並べられる。

align-items:flex-end

交差軸の終点、下揃えに並べられる。

align-items:center

中央に並べられる。

flex-wrapは、要素がコンテナーの幅を超える時に使う

flex-wrap の初期値は、nowrap です。

flex-direction:row が宣言されている時

flex-wrap:nowrap

コンテナーの幅を超えたら、要素が小さくなって幅の中に並べられる。

flex-wrap:wrap

コンテナーの幅を超えたら、次の段に並べられる。
交差軸に余裕がある時は、段の間に隙間ができる。

交差軸方向に揃えたい時
上縁に揃える時は
align-content:flex-start

下縁に揃える時は
align-content:flex-end

中心に据える時は
align-content:center

上縁と下縁にそろえて間に隙間を作る時は
align-content:space-between

flex-wrap:wrap-reverse

交差軸が反転。
コンテナーの下縁に、主軸の方向、左から右へ並べ、溢れた要素を上の段に並べる。

フレックスアイテム(flexitem)に設定できるプロパティ

  • align-self
  • order
  • flex-basis
  • flex-wrap
  • flex-shrink