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

CSS Flexboxを使ってコンテナ内の要素を左右に配置する方法

はじめに

CSS Flexbox(フレックスボックス)は、コンテナ内の子要素を柔軟かつ直感的に配置できる強力なレイアウトモジュールです。本記事では、flex関連プロパティを活用して、コンテナ内の要素を左右に振り分けて配置する方法を、実際のコード例とともにわかりやすく解説します。

flexプロパティの基本構文

CSSのflexプロパティは、次のような形式で記述します。

Selector {
    flex: /*値*/
}

また、要素を左右に分けて配置する際の鍵となるのがjustify-content: space-betweenです。親コンテナにdisplay: flexを指定したうえでこの値を設定すると、最初の要素は左端へ、最後の要素は右端へ配置され、余ったスペースが要素間に均等に配分されます。

例1：space-betweenで左右に配置する

以下の例では、「Left」と「Right」の2つのdiv要素を、背景画像を設定したコンテナの左右端に配置しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 2%;
            padding: 15%;
            align-self: center;
            background: url("https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb 1.2.1&auto=format&fit=stretch&w=600&q=80");
            color: white;
         }
         div > div {
            border: 2px solid red;
         }
      </style>
   </head>
   <body>
      <div id="container">
         <div>Left</div>
         <div>Right</div>
      </div>
   </body>
</html>

このコードを実行すると、次のような出力が得られます。

CSS Flexboxを使ってコンテナ内の要素を左右に配置する方法

コードのポイント

  • display: flex … コンテナをフレックスボックスとして定義します。
  • flex-direction: row … 子要素を水平方向(行)に並べます。
  • justify-content: space-between … 両端に要素を寄せ、中間の余白を均等化します。

例2：flex-flowで折り返しレイアウトを作成する

続いて、flex-flowプロパティに「column wrap」を指定した例を見てみましょう。複数の画像を縦方向に並べつつ、コンテナの高さを超えた分は自動的に折り返して表示されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #container {
            height: 250px;
            display: flex;
            flex-flow: column wrap;
            padding: 2%;
            background: url("https://images.unsplash.com/photo-1523830213227-f76e0415a976?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDE0fDZzTVZqVExTa2VRfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=650&q=60") 0;
         }
         img {
            margin: 2%;
            width: 60px;
            border-radius: 25%;
         }
      </style>
   </head>
   <body>
      <div id="container">
         <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
         <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
         <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
         <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
         <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
         <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
         <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
      </div>
   </body>
</html>

このコードを実行すると、次のような出力が得られます。

CSS Flexboxを使ってコンテナ内の要素を左右に配置する方法

コードのポイント

  • flex-flow: column wrap … 縦方向への並びと折り返しを一括で指定できるショートハンドプロパティです。
  • height: 250px … コンテナに固定の高さを設けることで、折り返しが発生する条件を作っています。
  • border-radius: 25% … 画像に丸みを持たせ、見た目を整えています。

まとめ

CSS Flexboxを使えば、justify-content: space-betweenによる左右配置や、flex-flowによる柔軟な折り返しレイアウトを、ごくシンプルな記述で実現できます。floatやposition調整といった従来のテクニックに比べ直感的で保守性も高いため、ヘッダーやフッター、ギャラリーなどさまざまなUIレイアウトにぜひ活用してみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>