【CSS】複数の要素を均等幅で横並びに配置する

今回は、CSS で要素を横並び＆均等幅で配置する方法についてです。
ようやく display: flex; を意のままに使えるようになったので、最近多用しています。

参考にさせていただいた記事はこちら。

flexboxで要素数に関わらず均等幅で横並びにする | cly7796.net
https://cly7796.net/blog/css/side-by-side-with-even-width-with-flexbox/

サンプルコードはこちら。
まず、HTML が下記のとおりです。

<div id="item-box">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

CSS がこちらです。

#item-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.item {
   width: 100%;
}

上記のように HTML と CSS を記述すれば、class 名が item の要素が均等幅で横並びに配置されました！

なお、均等幅配置なら <table> を使って、CSS で table-layout: fixed; を指定しても、ほぼ同じようなレイアウトになります。
この辺りはお好みで使い分けてください。

以上、CSS で複数の要素を均等幅で横並びにする方法についてでした。
ご参考になれば幸いです。