Webページを作る際には以下のような要素を横並びにしたいケースがよくあります。

通常HTMLのブロック要素は同じ階層に並べても縦に並ぶようになっているので、横並びするにはCSSで制御する必要があります。

そんな時に利用するのがFlexboxです。

Flexbox を使いこなすことで、要素の横並びや位置の調整は自在に扱うことが出来るようになります。

今回は実践でも良く使われるプロパティを重点的にdisplay: flexで横並びする方法を分かりやすく解説していきます。

ブロック要素とインライン要素

横並びについて学習する前にブロック要素とインライン要素について理解する必要があります。
HTMLの要素にはブロック要素とインライン要素の2つの種類があります。

ブロック要素

ブロック要素はレイアウトのまとまりとして使われる要素です。
`<div>`や`<p>`タグはブロック要素のタグになります。
ブロック要素は

• ブロック要素の幅は親要素の幅が引き継がれます。
• 同じ階層の要素は縦に並ぶ

という特徴があります。
例として、以下のコードを見てみましょう

<div>
  <p>SKILLED</p>
  <p>SKILLED</p>
  <p>SKILLED</p>
</div>

<style>
  p {
    background: deepskyblue;
    font-size: 62px;
    font-weight: bold;
    color: white;
    text-align: center;
  }
</style>

`<p>`タグが3つ並んだコードですが、幅は横いっぱいになっており、`<p>`タグは縦方向に並んで表示されています。まず、ブロック要素は解説した通り親要素の幅を引き継ぐのpタグの親要素であるdivタグの幅を引き継ぎます。

divタグもブロック要素で親の幅、この場合はbodyの幅になるので幅は横いっぱいの幅になっています。そのため、pタグも横いっぱいの幅が引き継がれており、上記のような横いっぱいの要素となっています。

インライン要素

インライン要素は一つの要素として捉えられます。
よく使うタグとしては<label>タグがインライン要素となっています。
特徴としては

• 同じ階層の要素は横に並ぶ

という特徴があります。

以下のコードを見てみましょう。

<div>
  <label>SKILLED</label>
  <label>SKILLED</label>
  <label>SKILLED</label>
</div>

<style>
  label {
    background: deepskyblue;
    font-size: 62px;
    font-weight: bold;
    color: white;
    margin: 0 10px;
    padding: 10px 30px;
  }
</style>

<label>タグはインライン要素になるので、同じ階層のものが横並びで並んでいることが分かります。

インライン要素であれば、要素は並べるだけで横並びなるのでdisplay: flexを使って横並びの定義をする必要はありません。
しかし、ブロック要素の場合は横に並べる場合はCSSで定義する必要があります。
CSSで横並びにする方法はいくつかありますが、その中でも良く使われるのがFlexboxを使った方法です。

Flexboxで横並びにする方法

display: flex; を使い横並びする方法は以下の通りです。

<div class="flex">
  <p>SKILLED</p>
  <p>SKILLED</p>
  <p>SKILLED</p>
</div>

<style>
  .flex {
      display: flex;
  }  
  p {
    width: 100%;
    background: deepskyblue;
    font-size: 62px;
    font-weight: bold;
    color: white;
    text-align: center;
  }
</style>

上記のようにコードを指定すると以下のように横並びのレイアウトにすることができます。

flexを設定する際は以下のポイントがあります。

• 横並びにしたい一つ上の階層にdisplay: flexを設定する
• ブロック要素の幅は widthプロパティを設定しない限りは親要素の横幅を引き継がない

横並びにする要素に対してdisplay: flexを付与するのではなく、横並びにしたい親要素にdisplay: flex;を付与するというのがポイントです。

横の位置の調整

Flexboxはただ要素を横並びにするだけだけでなく、追加のプロパティを与えることで位置の調整も行うこともできます。
横の調整を行う場合はdisplay: flexを付与した親要素にjustify-content のプロパティを付与することで調整が可能です。
justify-contentプロパティの基本的な値は以下の3つがあります。

start

justifi-contentにstartの値を指定すると横の位置が左寄せで表示されます。

.flex {
    display: flex;
    justify-content: start;
  }

end

justifi-contentにendの値を指定すると横の位置が右寄せで表示されます。

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

space-between

横の余白が均等になるように要素を表示します。均等の横幅で並べることができるので、細かい位置調整をする必要がなく便利な値です。

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

縦の位置の調整

flexは横だけでなく縦の位置調整も行うことが可能です。縦の位置調整にはalign-itemsプロパティを使用します。
align-itemsプロパティの基本的な値は以下の3つがあります。

start

align-itemsにstartを指定すると、要素の縦の位置を上部になるように調整します。

.flex {
    display: flex;
    align-items: start;
  }

center

align-itemsにcenterを指定すると、要素の縦の位置を中央になるように調整されます。

.flex {
    display: flex;
    align-items: center;
  }

end

要素の縦の位置を下部になるように調整されます。

.flex {
    display: flex;
    align-items: end;
  }

要素の折返し

Flexboxをたた横並びにするだけでなく、要素の幅がいっぱいになった時に自動で折り返すといった指定を行うこともできます。

折り返す方法には、flex-wrapプロパティを使用します。

使用する値は以下の通りです。

• nowrap（初期値）… 子要素を折り返しせず、一行に並べる
• wrap … 子要素を折り返し、複数行に上から下へ並べる
• wrap-reverse … 子要素を折り返し、複数行に下から上へ並べる

以下のコードでは横幅いっぱいになった時、要素を配置した時に横幅をはみ出さないようにflex-wrapにwrapを指定し折り返すようにしています。

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

display: flex;で横並びする方法は実践でも必ずといっていいほど利用します。
覚えておくことで、自在に要素の配置が出来るようになるので、ぜひ覚えておきましょう。

フロントエンドを学習するならSkilled(スキルド)

スキルドではフロントエンド専門の実践特化型のプログラミング学習サービスです。

コーディングからフロントエンジニアまでの学習をカバーしており、コーディングしながら実践的に学習することで知識ではなく『スキル』が身につけられるサービスとなっております。

現在無料体験キャンペーンを行っていますので、気になる方はぜひ無料体験を利用してみてください。