MENU
  1. ホーム
  2. HTML/CSS
  3. CSS 要素を横に並べるには？Flexboxの解説

CSS 要素を横に並べるには？Flexboxの解説

HTML/CSS Web制作

今回はFlexboxを使用した、要素を横に並べる方法をご紹介いたします。

通常、HTMLを記載していくと、下に下にと要素が追加されていきますが、実際のWebサイトでは横に並んでいたり、2列（2カラム）になっていたりなど、レイアウトがさまざまです。

Flexboxを使用することによって、レイアウトを組んでいくことが可能なため、ホームページ制作では必須なCSSとなっております。

目次

要素を横に並べるプロパティと値（display: flex）

親となる要素にたいして、display: flexを指定します。

親要素に指定することで、子要素が横並びになります。

<div class="container">    <!-- 親要素 -->
  <div class="box red"></div>   <!-- 子要素 -->
  <div class="box green"></div> <!-- 子要素 -->
  <div class="box blue"></div>  <!-- 子要素 -->
</div>

<style>
  .container {
    padding: 32px;
    display: flex;   /* 親となる要素に指定することで子要素が横並びに */
    width: 300px;
    border: 1px solid #555;
  }
  .box {
    width: 50px;
    height: 50px;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
  .blue {
    background-color: blue;
  }
</style>

横に並んだ要素の間隔や並び方を指定する（justify-content）

justify-content: flex-start （初期値）

<div class="container">    <!-- 親要素 -->
  <div class="box red"></div>   <!-- 子要素 -->
  <div class="box green"></div> <!-- 子要素 -->
  <div class="box blue"></div>  <!-- 子要素 -->
</div>

<style>
  .container {
    padding: 32px;
    width: 300px;
    border: 1px solid #555;
    display: flex;   /* 親となる要素に指定することで子要素が横並びに */
    justify-content: flex-start;
  }
  .box {
    width: 50px;
    height: 50px;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
  .blue {
    background-color: blue;
  }
</style>

値：flex-startが初期値となり、左から順番に並びます。

justify-content: flex-end

<div class="container">    <!-- 親要素 -->
  <div class="box red"></div>   <!-- 子要素 -->
  <div class="box green"></div> <!-- 子要素 -->
  <div class="box blue"></div>  <!-- 子要素 -->
</div>

<style>
  .container {
    padding: 32px;
    width: 300px;
    border: 1px solid #555;
    display: flex;   /* 親となる要素に指定することで子要素が横並びに */
    justify-content: flex-end;
  }
  .box {
    width: 50px;
    height: 50px;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
  .blue {
    background-color: blue;
  }
</style>

値：flex-endでは、右側に詰まる形で並びます。

justify-content: center

<div class="container">    <!-- 親要素 -->
  <div class="box red"></div>   <!-- 子要素 -->
  <div class="box green"></div> <!-- 子要素 -->
  <div class="box blue"></div>  <!-- 子要素 -->
</div>

<style>
  .container {
    padding: 32px;
    width: 300px;
    border: 1px solid #555;
    display: flex;   /* 親となる要素に指定することで子要素が横並びに */
    justify-content: center;
  }
  .box {
    width: 50px;
    height: 50px;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
  .blue {
    background-color: blue;
  }
</style>

値：centerでは中央に寄って表示されます。

justify-content: space-between

<div class="container">    <!-- 親要素 -->
  <div class="box red"></div>   <!-- 子要素 -->
  <div class="box green"></div> <!-- 子要素 -->
  <div class="box blue"></div>  <!-- 子要素 -->
</div>

<style>
  .container {
    padding: 32px;
    width: 300px;
    border: 1px solid #555;
    display: flex;   /* 親となる要素に指定することで子要素が横並びに */
    justify-content: space-between;
  }
  .box {
    width: 50px;
    height: 50px;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
  .blue {
    background-color: blue;
  }
</style>

値：space-betweenでは、中央と左右に均等に表示されます。

justify-content: space-around

<div class="container">    <!-- 親要素 -->
  <div class="box red"></div>   <!-- 子要素 -->
  <div class="box green"></div> <!-- 子要素 -->
  <div class="box blue"></div>  <!-- 子要素 -->
</div>

<style>
  .container {
    padding: 32px;
    width: 300px;
    border: 1px solid #555;
    display: flex;   /* 親となる要素に指定することで子要素が横並びに */
    justify-content: space-around;
  }
  .box {
    width: 50px;
    height: 50px;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
  .blue {
    background-color: blue;
  }
</style>

値：space-aroundでは、中央を起点に各要素が均等に表示されます。space-betweenと似ておりますが、space-betweenでは、左右の子要素の外側（赤箱の左側、青の右側）に余白が作成されないのに対して、space-aroundでは、各要素の左右に均等に余白が作成されております。

横に並んだ要素の高さや並び方を指定する（align-items）

align-items: flex-start （初期値）

<div class="container">    <!-- 親要素 -->
  <div class="box-1 red"></div>   <!-- 子要素 -->
  <div class="box-2 green"></div> <!-- 子要素 -->
  <div class="box-3 blue"></div>  <!-- 子要素 -->
</div>

<style>
  .container {
    padding: 32px;
    width: 300px;
    border: 1px solid #555;
    display: flex;   /* 親となる要素に指定することで子要素が横並びに */
    justify-content: space-around;
    align-items: flex-start;
  }
  .box-1 {
    width: 50px;
    height: 40px;
  }
  .box-2 {
    width: 50px;
    height: 60px;
  }
  .box-3 {
    width: 50px;
    height: 80px;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
  .blue {
    background-color: blue;
  }
</style>

値：flex-startが初期値となり、各要素の上側に揃って並びます。

align-items: flex-end

<div class="container">    <!-- 親要素 -->
  <div class="box-1 red"></div>   <!-- 子要素 -->
  <div class="box-2 green"></div> <!-- 子要素 -->
  <div class="box-3 blue"></div>  <!-- 子要素 -->
</div>

<style>
  .container {
    padding: 32px;
    width: 300px;
    border: 1px solid #555;
    display: flex;   /* 親となる要素に指定することで子要素が横並びに */
    justify-content: space-around;
    align-items: flex-end;
  }
  .box-1 {
    width: 50px;
    height: 40px;
  }
  .box-2 {
    width: 50px;
    height: 60px;
  }
  .box-3 {
    width: 50px;
    height: 80px;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
  .blue {
    background-color: blue;
  }
</style>

値：flex-endでは、各要素の下側に揃って表示されます。

align-items: center

<div class="container">    <!-- 親要素 -->
  <div class="box-1 red"></div>   <!-- 子要素 -->
  <div class="box-2 green"></div> <!-- 子要素 -->
  <div class="box-3 blue"></div>  <!-- 子要素 -->
</div>

<style>
  .container {
    padding: 32px;
    width: 300px;
    border: 1px solid #555;
    display: flex;   /* 親となる要素に指定することで子要素が横並びに */
    justify-content: space-around;
    align-items: center;
  }
  .box-1 {
    width: 50px;
    height: 40px;
  }
  .box-2 {
    width: 50px;
    height: 60px;
  }
  .box-3 {
    width: 50px;
    height: 80px;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
  .blue {
    background-color: blue;
  }
</style>

値：centerでは各要素の縦幅の中心を起点に並びます。

要素と要素の間隔を指定（gap）

<div class="container">    <!-- 親要素 -->
  <div class="box-1 red"></div>   <!-- 子要素 -->
  <div class="box-2 green"></div> <!-- 子要素 -->
  <div class="box-3 blue"></div>  <!-- 子要素 -->
</div>

<style>
  .container {
    padding: 32px;
    width: 300px;
    border: 1px solid #555;
    display: flex;   /* 親となる要素に指定することで子要素が横並びに */
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .box-1 {
    width: 50px;
    height: 40px;
  }
  .box-2 {
    width: 50px;
    height: 60px;
  }
  .box-3 {
    width: 50px;
    height: 80px;
  }
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
  .blue {
    background-color: blue;
  }
</style>

間隔を指定するには、gapプロパティを使用します。

marginプロパティでも指定が可能ですが、例えばmargin-rightで間隔を空けた場合、一番右の要素に余計な余白が作成されてしまいます。

疑似クラスでmarginを削除することも可能ですが、gapプロパティを使用することでコーディングの手間を省くことが可能なため、間隔を調整する際にはgapプロパティを使用しましょう！

さいごに

今回はFlexboxについて解説させていただきました。

よく使用するプロパティは決まってくるため、すべて覚える必要はないかと個人的には考えております。

Flexboxについてはプロパティが多数存在するため、わからなくなった場合は都度調べるようにすれば問題ありません。

いつ使うかわからないようなプロパティを一生懸命覚えるよりも、わからなくなった場合は調べるくらいの気持ちでいたほうが、勉強も進みやすいです！

Flexboxを使用すると実際のホームページのようなレイアウトを組むことができるため、ぜひ使いこなせるように頑張っていきましょう！

HTML/CSS Web制作
CSS コーディング 初心者向け

この記事が気に入ったら
フォローしてね！

Follow Me
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次