[CSS]上下左右中央は2行で済ませる!|2001Y.me

CSSを書くうえで、利用頻度が著しく高いのに書くのが割と面倒なのが、上下左右中央。Flexboxが登場して3行のコードで上下左右中央でき流ようになったけど、Gridを使えばさらに短い2行で済ませることができそう。

Gridを使って2行で上下左右中央

place-items を使う方法

place-itemsalign-itemsjustify-itemsをまとめることができる。

display: grid;
place-items: center;

place-content を使う方法

place-contentalign-contentjustify-contentをまとめることができる。

display: grid;
place-content: center;

ブラウザ対応状況


でも、Flexは2行では書けない…?

Twitterでplace-itemsの存在を知ったのですが、そこではdisplay: flex;を使ってました。でも、実際にコードにしてみると動かない…?

justify,align,content,items のまとめ

justify系は主軸、align系は交差軸

content系は余白間隔、items系はアイテムの配置

Flexでは効かないプロパティがいくつかある

折り返しさせないflex-wrap: nowrap;の場合(初期値)、align-contentは効かない。また、Flexではjustify-itemsが機能しない。

nowrap(初期値)wrap
align-content-
align-items
justify-content
justify-items--

なので、Flexでも無理やりplace系使うことはできるけど、結局place-contentplace-itemsを指定する必要があるので3行になってしまう。

display: flex;
place-content: center;
place-items: center;

なので、flexを使うなら大人しく今まで通りでいいのかな。

display: flex;
align-items: center;
justify-content: center;

どうなんだろ、自分のミスな気もするけど、ツイート主さんに確認する勇気もない…笑

▶︎Tweet @takamosoo - Twitter

▶︎flexのalign-items と align-content と justify-content と justify-items の違い - Qiita

lightbox