CSS flex〜チートシート

CSS flex〜チートシート

著者：

解　説

FlexBoxのプロパティと値をまとめたものです。
FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。
ネット上にも団子の串刺しのようなイラストが乱立しているようです。まずはプロパティの動きを覚えましょう。
しかし、FlexBoxのキモはflexプロパティの使いこなしだと思います。flexプロパティの初期値もしっかりと覚えておきましょう。
仕様書をしっかりと読み込むことを忘れないことが大事です。

flex レイアウト詳説〜Flex Box Layout

Container

値の太字は初期値です。

  • flex-direction
    row | row-reverse | column | column-reverse
  • flex-wrap
    nowrap | wrap | wrap-reverse
  • justify-content
    flex-start | flex-end | center | space-between | space-around | space-evenly
  • align-items
    stretch | flex-start | flex-end | center | baseline
  • align-content
    stretch | flex-start | flex-end | center | space-between | space-around

Item

値の太字は初期値です。

  • align-self
    auto | stretch | flex-start | flex-end | center | baseline
  • order
    0 | integer
  • flex-grow
    0 | integer
  • flex-shrink
    1 | integer
  • flex-basis
    auto | integer
  • flex
    0 1 auto | int int int

justify-content （flex-direction:rowの場合）

  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around
  6. space-evenly

align-items （flex-direction:rowの場合）

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline