浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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 で複数の要素を均等幅で横並びにする方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (5)