display:flexの配置一覧

flex-direction

flex-end

  • Item
  • Item
  • Item
  • Item

row-reverse

  • Item
  • Item
  • Item
  • Item

column

  • Item
  • Item
  • Item
  • Item

wrap

  • Item
  • Item
  • Item
  • Item

nowrap

  • Item
  • Item
  • Item
  • Item

justify-content

flex-start

  • Item
  • Item
  • Item
  • Item

flex-end

  • Item
  • Item
  • Item
  • Item

center

  • Item
  • Item
  • Item
  • Item

space-between

  • Item
  • Item
  • Item
  • Item

space-around

  • Item
  • Item
  • Item
  • Item

align-item

stretch

  • Item
  • Item
  • Item
  • Item

flex-start

  • Item
  • Item
  • Item
  • Item

flex-end

  • Item
  • Item
  • Item
  • Item

center

  • Item
  • Item
  • Item
  • Item

baseline

  • Item
  • Item
  • Item
  • Item

align-items: baseline;の有無

有り

  • Item
  • Item
  • Item
  • Item
無し
  • Item
  • Item
  • Item
  • Item

align-content

stretch

  • Item
  • Item
  • Item
  • Item

flex-start

  • Item
  • Item
  • Item
  • Item

flex-end

  • Item
  • Item
  • Item
  • Item

center

  • Item
  • Item
  • Item
  • Item

space-between

  • Item
  • Item
  • Item
  • Item

space-around

  • Item
  • Item
  • Item
  • Item