要素の横並び（flex）※基本編

CSS
HTML/CSS

要素の横並び（flex）※基本編

投稿：2021・05・06

更新：2022・02・26

ブロックレベルの要素は通常、どうしても縦並びになってしまいます。しかし、メニューのリストなどブロックレベルの要素を横並びにしたい場合も少なくありません。というか多いです。そこで、今回は要素を横並びにしてくれるCSS「display: flex;」を紹介していきます。

横並びにするだけなら簡単？

たとえば画像の下ではなく、横にタイトルと説明文を入れたい…という場合、画像と説明文を横並びにする必要が出てきます。
インラインレベルのタグなら何もしなくても横並びにすることができるので、インラインレベルのタグであるimgタグとspanタグだけを使うようにすると、

ここに文章を入れる

と、このように横並びにすることは一応可能ではあるのですが、インラインレベルには効かないCSSも多いです。それに、インラインレベルのタグしか使えないとなると、横並びにできるものがかなり限定されてしまいます。

そこで今回紹介するのが、ブロックレベルでも横並びにすることができ、しかもその並び方や順番なども指定できる dsiplay: flex; と、それに関連する各種CSSプロパティです。

display: flex; を指定することで、ブロックレベルであるtableタグ（表）なども横並びに表示させることができます。

test	test2
test3	test4

test	test2
test3	test4

レスポンシブを考慮するのであれば、縦並びにしておいた方が表示領域からはみ出てしまうリスクはなくすことができますが、PCなど比較的画面が大きなデバイスでは横並びにした方が見やすく、縦スクロールさせる量を減らすことができるという大きなメリットがあります。
皆さんの中にも、画面の縦方向へのスクロールがあまりに長くて、最後までWebページを見る気をなくしてしまった…という経験をお持ちの方もたくさんいらっしゃると思います。それだけ縦スクロール量は、ページ閲覧の途中離脱に大きく関わります。

…このブログ記事も縦スクロールが長くなり過ぎないように、さっさと解説に入りましょうかね！笑。

◆ display: flex とは ◆

flex（フレックス）とは、display（ディスプレイ）プロパティの値の１つで、合わせて要素の横並びを指定するCSSです。
※実際は横並びにする時だけでなく縦並びにする時でも使うのですが、今回は横並びに的を絞って解説します

何よりも重要なポイントは、横並びにしたい要素そのものではなく、親要素に設定するという点です。

実際にサンプルコードを見て頂くのが一番分かりやすいと思うので、こちらをご覧ください。

   <div>
     <p>このpタグを使った文章と</p>
     <p>このpタグを使った文章を横並びにする</p>
   </div>

    div {
      display: flex;
    }
    p {
      background-color:lightblue;
      width: fit-content;
    }
    p:last-child {
      background-color: lightyellow;
    }

このpタグを使った文章と

このpタグを使った文章を横並びにする

display: flex; を横並びにしたいpタグではなく、親要素のdivタグに設定しています。また、pタグはブロックレベルのタグなので、普通の手段では横並びにならないはずですが、しっかり横並びになっていますね。

このように、単に要素を横並びにするだけであれば、これだけでOKです。
しかし、実際は横並びにするだけでなく、横並びにした上でレイアウトを調整したいという場合がとても多いです。上の例でもpタグ同士がくっついてしまっていて、一見すると横並びというより繋がっているように見えてしまっていますよね。

そこで次の章では、横並びにした後の基本的な調整方法を説明していきます。

POINT!

・display: flex; はブロックレベルでも要素を横並びにできるCSS設定！
・横並びにしたい要素そのものではなく、親要素に設定する！

◆ justify-content とは ◆

justify-contentとは、display: flex; などでレイアウトを調整した要素に対して、さらに要素の配置位置を指定することができるプロパティです。

値はキーワード値を取り、center、flex-start、flex-end…といったものがあります。

＊justify-contentの構文＊
■ セレクタ { justify-content: center ; }

通常、独立してこのCSSを設定するというよりは、display: flex; と合わせて設定することが多いです。なのでセットで覚えておくと良いと思います。
また、キーワード値は以下のようなものがあります。

＊justify-contentのキーワード値と効果＊

キーワード値	効果
center	中央に配置する
flex-start	先頭に寄せる
flex-end	末尾に寄せる
space-between	等間隔に配置。先頭は先端に、末尾は末端に寄せる
space-around	等間隔に配置。先頭の前と末尾の後の余白は、アイテム間の余白の半分
space-evenly	等間隔に配置。先頭の前と末尾の後の余白も同じ

言葉ではイメージしづらいものもあるので、実際にどのように配置されるか試して確認するのが一番良いと思います。
下に、display: flex; だけを設定して横並びにしたボックスと、それぞれの効果が適用されるボタンを用意しました。
配置がどう変わるか、対応するボタンを押して実験してみてください！

box1

box2

box3

box4

実際に動かしてみると、どこでどう使ったら良いかがイメージできますね。たとえばヘッダーに設置したメニューを右端に寄せたい時は「flex-end」が良いでしょうし、画像を等間隔でフォトギャラリーみたいに並べたい場合は、「space-between」か「space-around」、「space-evenly」が良さそうです。

このように、単に横並びにするだけでなく「どのように横並びにするか」までできるようになると、より様々なデザインに対応することが可能となります。

POINT!

・justify-contentは、flexなどで横並びにした要素をどのように配置するか指定できるプロパティ！
・justify-contentは、centerやflex-startなどのキーワード値で指定する！

◆ 横並びにした要素の並び替え ◆

display: flex; で横並びにした要素は、orderプロパティを使って並び替えることができます。
HTMLファイルを書き換えることなく要素の並び替えができるのはとても便利なので、ぜひ基本テクニックとして覚えてくださいね！

通常、display: flex; で要素を横並びにすると、HTMLに上から記述した順に左から右へと横並びになります。

    <div id="samplebigflexorderbox">
      <div class="sampleflexorder1">box1</div>
      <div class="sampleflexorder2">box2</div>
      <div class="sampleflexorder3">box3</div>
      <div class="sampleflexorder4">box4</div>
    </div>

    div {
      display: flex;
    }
    #samplebigflexorderbox div {
      width:10vw;
      height: 80px;
    }
    .sampleflexorder1 {
      background-color:skyblue;
    }
    .sampleflexorder2{
      background-color:lightgreen;
    }
    .sampleflexorder3{
      background-color:lightyellow;
    }
    .sampleflexorder4{
      background-color:yellowgreen;
    }

box1

box2

box3

box4

ですが、HTMLの並びは変えずに横並びにした要素の並び順だけ変えたい…ということもあります。HTMLの方を変更してしまうと、他の部分にまで影響が出てしまうリスクが高いですからね。

そんな時に役立つのが、 orderプロパティです。

display: flex; や、justify-contentプロパティは親要素をセレクタにしてCSSを設定しますが、orderプロパティは子要素（横並びになっているコンテンツ＝flex-item）に設定します。
値は単位をつけない数値で指定し、数値が若い方から並べられます。

＊ orderの構文＊
■　セレクタ（flex-item） { order: 1; }

orderプロパティを設定したフレックスアイテムよりも、設定していないフレックスアイテムの方が先に並べられます。なので、order: 1; と設定したアイテムが必ずしも先頭に来るとは限りません。
それを踏まえた上で、サンプルコードを見ていきましょう！

    <div id="samplebigflexorderbox" style="display:flex;">
      <div class="sampleflexorder1">box1<br>order指定なし</div>
      <div class="sampleflexorder2">box2<br>order3</div>
      <div class="sampleflexorder3">box3<br>order1</div>
      <div class="sampleflexorder4">box4<br>order2</div>
    </div>

    div {
      display: flex;
    }
    #samplebigflexorderbox div {
      width:10vw;
      height: 80px;
    }
    .sampleflexorder1 {
      background-color:skyblue;/*orderを設定していないので先頭にくる*/
    }
    .sampleflexorder2 {
      background-color:lightgreen;
      order: 3;
    }
    .sampleflexorder3 {
      background-color:lightyellow;
      order: 1;
    }
    .sampleflexorder4 {
      background-color:yellowgreen;
      order: 2;
    }

box1
order指定なし

box2
order3

box3
order1

box4
order2

orderプロパティを設定していないbox１は問答無用で先頭に来ます。他のboxはorderプロパティを設定しているので、orderの数値順に並んでいますね。

正直、Webサイトの作成途中などHTMLを編集しても問題がない状況であれば、HTMLの並び順を変えた方が手っ取り早いのは間違いありません。ですが、既に出来上がっているWebサイトの修正を行う場合はCSSで調整した方が無難です。（HTMLの並び順を変えると、それまで有効だったCSSが無効になることもあり、デザインが大きく崩れてしまう原因となるため）
また、PCページとスマホページで並び順を変えたい時なども役に立ちます。

POINT!

・orderプロパティで、横並びにした要素の並び順を変更できる！
・orderプロパティは、親要素ではなく子要素（フレックスアイテム）に設定する！
・orderプロパティの値は数値で指定し、数値が小さいモノから順に並べられる！
・orderプロパティを設定していないものがあれば、それが先頭に来る！

ワンポイントチェック

display: flex; は要素を横並びにできる便利なCSSですが、横並びにするだけでなく他の使い方もあります。
その１つが、「要素の中央配置」です。

要素を中央に配置するCSSは、こちらの記事で紹介しましたが、その記事では紹介しきれなかったのでここで紹介しておきます。

やり方はシンプルです。中央配置したい親要素に、display: flex; と、justify-content :center; を設定するだけ！

    <div>
      <p>中央配置にしたい</p>
    </div>

      div {
        display: flex;
        justify-content: center;
      }
      p {
        background-color: lightyellow;
        padding: 10px;
      }

中央配置にしたい

このように、バシッと中央配置になります。
ちなみにですが、この方法であれば、文章に幅（width）を設定しなくても左寄せのまま中央配置にできるので便利です。

今回の動画で紹介したコード！

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
  </style>
  <body>
   <div style="display: flex;">
     <p style="background-color:lightblue; width: fit-content;">このpタグを使った文章と</p>
     <p style="background-color:lightyellow; width: fit-content;">このpタグを使った文章を横並びにする</p>
   </div>
   <div id="samplebigflexbox" style="display:flex; width:80vw;">
     <div class="sampleflex1" style="background-color:skyblue; width:80px; height:80px;">box1</div>
     <div class="sampleflex2" style="background-color:lightgreen; width:80px; height:80px;">box2</div>
     <div class="sampleflex3" style="background-color:lightyellow; width:80px; height:80px;">box3</div>
     <div class="sampleflex4" style="background-color:yellowgreen; width:80px; height:80px;">box4</div>
   </div>
   <button style="padding:10px;" id="flexcenterbt" type="button" name="button">center</button>
   <button style="padding:10px;" id="flexstartbt" type="button" name="button">flex-start</button>
   <button style="padding:10px;" id="flexendbt" type="button" name="button">flex-end</button>
   <button style="padding:10px;" id="flexspacebetweenbt" type="button" name="button">space-between</button>
   <button style="padding:10px;" id="flexspacearoundbt" type="button" name="button">space-around</button>

   <script type="text/javascript">
     {
       document.getElementById('flexcenterbt').onclick = function(event) {
         document.getElementById('samplebigflexbox').setAttribute('style','display:flex; justify-content: center;');
       };
       document.getElementById('flexstartbt').onclick = function(event) {
         document.getElementById('samplebigflexbox').setAttribute('style','display:flex; justify-content: flex-start;');
       };
       document.getElementById('flexendbt').onclick = function(event) {
         document.getElementById('samplebigflexbox').setAttribute('style','display:flex; justify-content: flex-end;');
       };
       document.getElementById('flexspacebetweenbt').onclick = function(event) {
         document.getElementById('samplebigflexbox').setAttribute('style','display:flex; justify-content: space-between;');
       };
       document.getElementById('flexspacearoundbt').onclick = function(event) {
         document.getElementById('samplebigflexbox').setAttribute('style','display:flex; justify-content: space-around;');
       };
     }
   </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    div {
      display: flex;
    }
    #samplebigflexorderbox div {
      width:10vw;
      height: 80px;
    }
    .sampleflexorder1 {
      background-color:skyblue;/*orderを設定していないので先頭にくる*/
    }
    .sampleflexorder2{
      background-color:lightgreen;
      order: 3;
    }
    .sampleflexorder3{
      background-color:lightyellow;
      order: 1;
    }
    .sampleflexorder4{
      background-color:yellowgreen;
      order: 2;
    }
  </style>
  <body>
    <div id="samplebigflexorderbox" style="display:flex;">
      <div class="sampleflexorder1" style="background-color:skyblue; width:10vw; height: 80px;">box1<br>order指定なし</div>
      <div class="sampleflexorder2" style="background-color:lightgreen; order: 3; width:10vw; height: 80px;">box2<br>order3</div>
      <div class="sampleflexorder3" style="background-color:lightyellow; order: 1; width:10vw; height: 80px;">box3<br>order1</div>
      <div class="sampleflexorder4" style="background-color:yellowgreen;order: 2; width:10vw; height: 80px;">box4<br>order2</div>
    </div>
  </body>
</html>

記事のトップへ戻る