Go to Qiita Advent Calendar 2024 Top
LoginSignup
21
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@mishiwata1015(Masanori Ishiwata)inQiita株式会社

【CSS】flexboxにjustify-selfは効かない

Last updated at Posted at 2019-05-20

中央寄せしているflex itemの中で、特定のものだけ端に寄せたい

align-self と同じ要領で、flex containerに justify-content: center; 設定しておいて、端に寄せたいflex itemに justify-self を設定すればいけるかな？と思ったら効かなかった。

See the Pen EzXeaw by mishiwata1015 (@mishiwata1015) on CodePen.

どうやら、flexboxにjustify-selfは効かないとのこと。

端に寄せたいflex itemに、 margin-left: auto; や margin-right: auto; を設定して解決。

See the Pen pmrVBP by mishiwata1015 (@mishiwata1015) on CodePen.

21
10
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
21
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?