1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

flex でのセンタリングメモ

1
Last updated at Posted at 2018-02-08

display: flex、便利なので何気なく使っている気がします。

Web サービスの UI の位置をセンタリングする場合、以下の flex 系のプロパティを使用するより内部要素に margin: auto を当てた方が良さそうです。

  • align-items: center
  • justify-content: center

人が組んでいる物のをペタペタ触ってて気付いたんですが、flex 系のプロパティでは画面サイズを小さくしたり要素を大きくして見切れが発生すると、見切れた上・左のコンテンツにスクロールできなくなります。

See the Pen Flex Centering w/ Margin or Flex container properties by k-utsumi (@k-utsumi) on CodePen.

内部でスクロール出来るか出来ないかだけの違いですが、ウィンドウ系の UI を実装している場合、見切れた部分を表示する術が無く何気に UX の悪い状態になります。

flex のプロパティを使いこなせば普通に回避できそうな気もしますが、割とシンプルな実装で回避できるので margin: auto がお勧めです。

[追記:2018年8月30日]
IE で margin: auto でのセンタリングが効かない様なので、
IE 対応が必要な物には利用しないほうが良いです。

[追記:2019年1月1日]
IE でも効いたので何かの勘違いだった?模様。
効かなかった気がするのだけど。。:frowning2:

1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?