display:flexで実は使える小技|限定的だけど頭の片隅に置いとくには丁度良い(1)

TOP CSS display:flexで実は使える小技|限定的だけど頭の片隅に置いとくには丁度良い(1)

使い方は限定的にはなるけど、私もこれを知るまでは要素の数とパーセントで計算してちょうど良い幅を出したりしてて、とても面倒臭かったのよ。本当に計算してたw
デザイン上、均等に並べたくてでも個数や幅的にうまくいかない的な時にググってたら見つけて感激してからたまに使ってます

その方法がこちら

なんとdisplayプロパティのflexに対しても、grid-template-columnが使える!
もっと早く言ってよ〜。ねぇ?

と、言うことは、と言うことはねアレもコレも使えるんじゃね?!むしろ使えないとjustify-contentとあんまり変わらないんじゃね?!と思ったそこのアナタ

正解です、 column-gapもrow-gapも使える。ただし要注意しないといけないのが並べる要素の親要素の親要素、ここでいうとbodyの横幅を指定しておかないと改行がされないのと、flex-wrapを指定しないと一列に並んでしまうことですかね。それでも均等に並んでくれるので何かしらの理由でflexを使用しなければならない時に役立ちそうですよね。

頭の片隅においておくと役にたちそうですよね。
それではまた。