CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS FlexboxでDIV要素を左・中央・右に配置する方法｜justify-contentの使い方

CSSのjustify-contentプロパティを使用すると、フレックスコンテナの主軸方向（デフォルトでは水平方向）に沿って子要素の間や周囲のスペースを分配し、柔軟に配置を制御できます。本記事では、複数のDIV要素を「左・中央・右」のように分散配置する方法を、具体的なコード例と表示結果とともにわかりやすく解説します。

justify-contentプロパティの構文

justify-contentは、display: flex;を指定した親要素（フレックスコンテナ）に対して設定します。基本の構文は以下のとおりです。

セレクタ {
    display: flex;
    justify-content: /* 値 */;
}

主な値とその挙動

  • flex-start：要素を主軸の始点（左）に寄せて配置
  • center：要素を中央にまとめて配置
  • flex-end：要素を主軸の終点（右）に寄せて配置
  • space-between：最初の要素を左端、最後の要素を右端に配置し、残りの余白を要素間に均等に配分
  • space-around：各要素の左右に均等な余白を確保（両端の余白は半分になる）
  • space-evenly：両端を含むすべての間隔を完全に均等に配分

例1：space-betweenで3つのDIVを左・中央・右に配置する

space-betweenを指定すると、最初の要素はコンテナの左端に、最後の要素は右端に配置され、中間の要素がその間に均等な間隔で並びます。要素が3つであれば、まさに「左・中央・右」のレイアウトが実現できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #root {
            margin: 5%;
            display: flex;
            justify-content: space-between;
         }
         #one {
            box-shadow: inset 0 0 34px #b798e1;
         }
         #two {
            box-shadow: inset 0 0 34px #236fa0;
         }
         #three {
            box-shadow: inset 0 0 34px #43946a;
         }
         .element {
            padding: 7%;
            border-radius: 15%;
         }
      </style>
   </head>
   <body>
      <div id="root">
         <div class="element" id="one">1</div>
         <div class="element" id="two">2</div>
         <div class="element" id="three">3</div>
      </div>
   </body>
</html>

上記コードの表示結果は以下のとおりです。1番の要素が左端、2番が中央、3番が右端に配置されていることが確認できます。

CSS FlexboxでDIV要素を左・中央・右に配置する方法｜justify-contentの使い方

例2：space-evenlyで6つのDIVを均等配置する

space-evenlyを指定すると、コンテナの両端を含めたすべての間隔が完全に均等になります。space-betweenとの違いは「端にも同じ幅の余白が入る」点です。以下の例では、6つのDIV要素を等間隔に並べています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #root {
            margin: 5%;
            padding: 2%;
            display: flex;
            justify-content: space-evenly;
            box-shadow: inset 0 10px 40px magenta;
            font-weight: bold;
         }
         div > div {
            padding: 2%;
            border-radius: 15%;
         }
         div:nth-of-type(even) {
            box-shadow: inset 2px 2px 20px orange;
         }
         div > div:nth-of-type(odd) {
            box-shadow: inset 2px 2px 20px lightblue;
         }
      </style>
   </head>
   <body>
      <div id="root">
         <div>1</div>
         <div>2</div>
         <div>3</div>
         <div>4</div>
         <div>5</div>
         <div>6</div>
      </div>
   </body>
</html>

上記コードの表示結果は以下のとおりです。6つの要素が、端を含めてまったく同じ間隔で並んでいます。

CSS FlexboxでDIV要素を左・中央・右に配置する方法｜justify-contentの使い方

まとめ

justify-contentプロパティを活用すれば、floatや絶対位置指定といった複雑なテクニックに頼ることなく、要素の水平方向の配置を簡単かつ堅牢に実現できます。「左・中央・右」のような分散配置にはspace-between、端を含めた完全な均等配置にはspace-evenlyが最適です。画面幅が変わってもレイアウトが崩れにくく、レスポンシブデザインとの相性も抜群なので、モダンなWebレイアウトの必須テクニックとしてぜひマスターしておきましょう。

  1. CSSを使ってユーザー評価スコアカードを作成する方法

    CSSとFont Awesomeのアイコンフォントを組み合わせれば、レビューサイトやECサイトでおなじみの「ユーザー評価」スコアカードを簡単に作成できます。平均評価を示す星アイコンと、各星の評価件数を視覚化したプログレスバー（進捗バー）を並べることで、訪問者にとって直感的に分かりやすい評価パネルを実現できます。 実装例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ