CSSで横並びに要素を並べて表示する

2021.05.13

表示を横並びにしたい

ページの表示でタイトルやアイコンなどの要素をキレイに横並びにしたい場合、 CSSでflexboxを使うことで解決できる。

横並びと書いたが、設定により縦並びも可能。

flexboxが優秀なのは、画面の幅が合わない場合に自動的に折り返してくれるところ。この機能によりスマートフォンなどの幅が小さな画面の場合でも要素単位に折り返して表示してくれる。

親要素に、display: flexを指定することで可能。

<div class="container">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

に対して、CSSでクラスcontainerを設定。

.container {
  display: flex;
  flex-wrap: wrap;}

flex-wrapは折り返すかどうかの設定で、wrapで自動折り返しとなる。デフォルトはnowrapで折り返しなし。

justify-contentで指定できる。

.container {
  display: flex;
  justify-content: flex-end;}

.container {
  display: flex;
  justify-content: center;}

.container {
  display: flex;
  justify-content: space-between;}