通常、デモページのようなコンテナブロックを実装したい場合、
以下のように、max-widthやwidth、margin: 0 auto;を指定しますよね。
See the Pen
Untitled by tom k (@tom-k-the-encoder)
on CodePen.
それを、以下のようなmin関数やmargin-inlineなどのモダンなCSSで書いてみようよという試みです。
See the Pen
Untitled by tom k (@tom-k-the-encoder)
on CodePen.
私はどちらかというと
width: ○%;
max-width: ○○;
padding: ○px;
margin: 0 auto;
上記のような派閥にいるんですが、
width: min(○% - 〇〇px, ○○)
margin-inline: auto;
padding: ○px;
と書くことによって、確かに書く行数は減るよね、という印象。
実務で使ってみて、感覚を試してみたいと思います。とりあえずメモ！
参考にさせていただいたYouTubeチャンネル様：HIROCODE.様
