HTML / CSS で要素を横並びにする簡単な方法

このようにお考えではないでしょうか。今回はHTML / CSS で要素を横並びにする簡単な方法について、簡単に解説します。上記の画像のように、要素を横並びにしたいという方はぜひ最後までご確認ください。

HTML / CSS で要素を横並びにする方法

<div class="parents">
  <div class="child1">A</div>
  <div class="child2">B</div>
  <div class="child3">C</div>
  <div class="child4">D</div>
</div>

.parents {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

HTML / CSS で要素を横並びにする方法は簡単です。HTMLとCSS を上記のように記述すると、要素が以下の画像のように、要素を横並びで配置します。Flexbox (Flexible Box Layout Module) というCSSの機能を利用して要素の横並びを実現しています。

また flex-wrap: wrap を記述することで、画面幅が狭いときに自動的に折り返すようにしています。display: flex を使い要素を横並びするとき、あわせて flex-wrap: wrap を記述して、レスポンシブ対応をしておくとよいでしょう。space-evenly では、子要素の間隔と親要素と子要素の間隔は均等です。この記述だと子要素間の間隔は常に同じになります。

justify-content: space-evenly;

justify-content: space-around;

space-around では、要素の両側に均等な間隔を空けます。 親要素の両端にも間隔が作られます。 子要素間の間隔は、親要素端と子要素の間の間隔の2倍になります。

justify-content: space-between;

justify-content: center;

justify-content: flex-start;

justify-content: flex-end;

まとめ

いかがでしたでしょうか。ある要素を横並びにしたい場合は、その親要素のCSSに以下の記述を加えるとよいでしょう。

display: flex;
flex-wrap: wrap;
justify-content: space-evenly;

display: flex で横並びを実現、flex-wrap: wrap で画面幅が狭いときに自動的に縦並びを実現します。また、下表のとおり space-evenly と space-around は少し違います。ご注意ください。

space-evenly	子要素の間隔と親要素と子要素の間隔は均等です。この記述だと子要素間の間隔は常に同じになります。	アイテム間の間隔を均等にしたい場合に使用
space-around	子要素の両側に均等な間隔を空けることが可能です。親要素の両端にも間隔が作られます。子要素間の間隔は、親要素端と子要素間の間隔の2倍です。	アイテムの周りに「ゆとり」を持たせたい場合に使用

そのほかについては、当記事内の画像を見れば一目瞭然だと思います。ご参考までに。