横並びになったボタンを同じ幅で配置するCSS

複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten

[ginpei]

gridを使う。grid-auto-flow:columnのときwidth:fit-contentとgrid-auto-columns:1frを併用すると全体で同じ最小の幅に。

[hiroshe]

ウェブ画面のレイアウトってもっと簡単にいい感じに作れるようにならんのかな。デリケートすぎてめんどくさすぎ。