css のautoとか中央寄せとか

最近疑問に思ってた事を。。

何かさ、よく

width: 500px;
margin: 0 auto;

これって、使ってると思ってて。

中央寄せにする時なんだけど。

でも、まあ、全体のコンテンツをこうしちゃうとレイアウトが、
ぐちゃーってなる時もあるから、まあ全体はこれでいい。

ただ、中のコンテンツで、可変でもあってほしい！みたいなとき。

max-width: 500px;
margin: 0 auto;

これが何とも便利
今更知っちゃったよ。。。

という事で、これからは多様していこうと思う。

See the Pen aOpKVp by megumin (@megumin23) on CodePen.

画面幅とかかえたり、テキストをかえてみると分かります！

そして、そういや今回の案件で(今更悩んでんのかよってはなしだけどw)
auto使うか、100%使うかみたいなとこ悩んだ。

画像表示枠を可変にしたくて。
まあ、結局調べて書いてたやつをコピペしたんだけど。
ちょっと自分なりに調べてみたのでこちらも備忘録的に。

まずこのサイトを参考にさせていただいた
いや、むしろこのサイトさんがドンピシャだったので。

結局、その要素に別のプロパティが指定されてなかったらまあ何とかなるけど、
ほかのプロパティが指定されてある時は要注意ってことだね。

今回の例で言えば、paddingとかborderとか。
padding: 20px;とかはいってたらwidth: auto;の場合ははみ出ない(親要素があればそこから)、 でもwidth: 100%;にすると横幅が100%+20pxではみ出ちゃう。

これ、重要だよね。