px｜固定値だが完全固定ではない

pxはピクセル単位で、画面幅に関わらず同じ大きさを保つ固定値です。ボタンの高さやアイコンのサイズなど、画面幅が変わっても大きさを変えたくない箇所に向いています。

ただし、pxは完全に固定されるわけではありません。ボックスの幅に600pxを指定した状態で、画面幅そのものが600pxより狭くなると、ボックスは画面からはみ出さないように縮みます。pxは値そのものは固定されていますが、ボックスが収まる領域（親や画面）がそれより狭くなれば、その領域に押し込まれる形で縮むという性質を持っています。

%｜親を基準にする

%（パーセント）は、そのボックス自身のサイズではなく、直近の親ボックスのサイズを基準にした割合でサイズが決まる単位です。幅を50%に指定すれば、親の横幅の半分の大きさになります。

%の性質で重要なのは、親のサイズが変われば子のサイズも自動で追従する点です。親ボックスの横幅を広げると、50%を指定した子ボックスも一緒に広がります。子ボックスを2つとも50%にすれば、2つのボックスを横並びにできます。この、親が変われば子も変わるという連動が、%を使う一番の理由です。

2-1で確認した入れ子の考え方がここで生きてきます。%を指定するときは、常に「このボックスの直近の親は何か」を意識しないと、意図しない基準でサイズが決まってしまいます。

auto｜中身に合わせる

autoは、ボックスの高さや幅を数値で固定せず、中に入っている要素の分量に合わせて自動的に決める単位です。特に高さの指定でよく使います。

高さをautoにしておくと、中のテキストが増えたときにボックス自身の高さも一緒に伸びます。逆に高さを200pxのように数値で固定してしまうと、テキストが増えたときにボックスの中に収まりきらず、はみ出してしまいます。この、中身がはみ出すトラブルは、STUDIO公式の制作チェックリストでも代表的なつまずきとして挙げられている症状で、多くの場合は原因が親ボックスの高さの固定にあります。

flex｜横並びの比率を作る

flexは、横並び（または縦並び）になった兄弟ボックスどうしの比率を指定する単位です。3つの兄弟ボックスにそれぞれflex 1・flex 2・flex 1を指定すると、全体の幅を1:2:1の比率で分け合います。

%との違いは基準にあります。%は親のサイズに対する割合であるのに対し、flexは兄弟どうしで余った幅をどう分け合うかという比率です。3カラムのカード列のように、画面幅が変わっても常に同じ比率を保ちたいレイアウトでは、flexのほうが扱いやすくなります。画面幅を変えても、指定した比率そのものは変わりません。

max-widthで伸びすぎを防ぐ

幅を100%にしたボックスは、画面幅いっぱいまで広がります。これは狭い画面では都合がよい一方、大きなディスプレイで見たときには、1行の文字数が長くなりすぎて読みにくくなるなどの問題が起こります。

この、広い画面で伸びすぎる問題を防ぐのがmax-widthです。幅は100%のままにしておき、max-widthに1000pxのような上限値を指定すると、画面が広いときはその上限で止まり、画面が狭いときは100%のまま縮む、という2つの性質を両立できます。本文エリアやセクションの中央寄せコンテンツで、max-widthはよく使う設定です。

vw・vh・dvh｜画面を基準にする

vw・vh・dvhは、親ボックスではなくブラウザの画面（ビューポート）そのものを基準にする単位です。100vwは画面の横幅いっぱい、100vhは画面の縦幅いっぱいを意味します。ファーストビューを画面いっぱいの高さにしたいときなど、画面基準でサイズを決めたい場面で使います。

vhとdvhの違いは、スマホのブラウザでアドレスバーが表示・非表示で高さが変わる場合の挙動です。dvh（dynamic viewport height）は、その時点で実際に表示されている画面の高さに追従するため、スマホでの表示崩れが起きにくくなります。ファーストビューの高さ指定では、vhよりdvhのほうが安定した見え方になります。