css3 flex 早見表。inline-block は古いので flex を使いましょう

display: flex; と一緒に記述するもの

  • flex-flow: (flex-direction, flex-wrap をまとめて設定できる)
  • flex-direction: 並び方向 (row, row-reverse, column, column-reverse)
  • flex-wrap: 改行設定 (nowrap, wrap, wrap-reverse)
  • justify-items: 子要素の x 軸の配置
  • justify-content: 子要素の行、列の y 軸の配置
  • align-items: 子要素の y 軸の配置
  • align-content: 子要素の行、列の y 軸の配置
  • place-items: 子要素の x, y 軸の配置
  • place-content: 子要素の行、列の x, y 軸の配置
  • flex-flow: row nowrap (初期値)
    • row nowrap
    • row wrap
    • row wrap-reverse
    • column nowrap
    • column wrap
    • column wrap-reverse
  • flex-direction: row (初期値)
    • row ... 横方向に並べる
    • row-reverse ... 横方向に逆方向に並べる
    • column ... 縦方向に並べる
    • column-reverse ... 縦方向に逆方向に並べる
  • flex-wrap: nowrap (初期値)
    • nowrap ... はみ出しても一列に並べて表示する
    • wrap ... 枠内で改行する
    • wrap-reverse ... 枠内で逆に改行する。row だと上に改行する。column だと左に改行する。
  • justify-items, align-items, place-items:
    • flex-start ... 左寄せ、上寄せ
    • center ... 中央寄せ
    • flex-end ... 右寄せ、下寄せ
    • space-between ... 均等配置1
    • space-around ... 均等配置2
    • space-evenly ... 均等配置3
  • justify-content, align-items, place-items:
    • start ... 左寄せ、上寄せ
    • center ... 中央寄せ
    • end ... 右寄せ、下寄せ
    • space-between ... 均等配置1
    • space-around ... 均等配置2
    • space-evenly ... 均等配置3

display: flex; を設定した子要素に記述するもの

  • order: 表示する順番 (0〜n)
  • flex: (flex-grow, flex-shrink, flex-basis をまとめて設定できる)
  • flex-grow: 横幅 (row)、高さ (column) の伸ばす割合 (0〜n)。数値が高いほど伸びる
  • flex-shrink: 横幅 (row)、高さ (column) の縮める割合 (0〜n)。数値が高いほど縮む
  • flex-basis: 横幅 (row)、高さ (column) を指定する
  • justify-self: x 軸の配置
  • align-self: y 軸の配置
  • place-self: x, y 軸の配置
  • order: 0 (初期値)
    • 0〜n 数値
  • flex: 0 1 auto (初期値)
  • flex-grow: 0 (初期値)
    • 0〜n 数値
  • flex-shrink: 1 (初期値)
  • flex-basis: auto (初期値)
    • auto
    • content
    • 0px〜(n)px
  • justify-self, align-self, place-self:
    • auto
    • normal
    • self-start
    • self-end
    • flex-start
    • flex-end
    • center
    • baseline
    • first baseline
    • last baseline
    • stretch
カテゴリー:CSS