CSSのFlexboxレイアウト【Flexコンテナー】のプロパティサンプル

flex-direction

row
  • 1
  • 2
  • 3
  • 4
row-reverse
  • 1
  • 2
  • 3
  • 4
column
  • 1
  • 2
  • 3
  • 4
column-reverse
  • 1
  • 2
  • 3
  • 4

flex-wrap

nowrap
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
wrap
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
wrap-reverse
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

justify-content

flex-start
  • 1
  • 2
  • 3
  • 4
center
  • 1
  • 2
  • 3
  • 4
flex-end
  • 1
  • 2
  • 3
  • 4
space-between
  • 1
  • 2
  • 3
  • 4
space-around
  • 1
  • 2
  • 3
  • 4

align-items

stretch
  • 1
  • 2
  • 3
  • 4
flex-start
  • 1
  • 2
  • 3
  • 4
center
  • 1
  • 2
  • 3
  • 4
flex-end
  • 1
  • 2
  • 3
  • 4
baseline
  • 1
  • 2
  • 3
  • 4

align-content

stretch
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
flex-start
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
center
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
flex-end
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
space-between
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
space-around
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8