Help us understand the problem. What is going on with this article?

flexboxを団子に喩える

More than 3 years have passed since last update.

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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした