LoginSignup
40
33

More than 5 years have passed since last update.

@YaaMaainはてな

flexboxを団子に喩える

Posted at

flexboxのプロパティの意味を文章で説明されてもわかりにくかったので、団子にした。

flex-direction

串の向き。reverseがつくと順番がひっくり返る。

direction.png

  • row
  • row-reverse
  • column
  • column-reverse

justify-content

団子同士のくっつけ方。

justify1.png

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around: 団子の両端に均等に空白ができる

align-items

団子に串を刺す位置。

items.png

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch: 団子を串と垂直方向に引っ張る

align-content

串同士のくっつけ方。

content1.png

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around: 串の両側に均等に空白ができる
  • stretch
40
33
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
40
33