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

CSS Flexboxで要素をコンテナの下部に配置する方法

Flexboxで要素を下部に配置する基本の考え方

CSS Flexbox(フレックスボックス)を使えば、positionなどの位置指定プロパティに頼らなくても、要素をコンテナの下部に簡単に配置できます。鍵となるのはmargin-top: auto;という指定です。

フレックスアイテムに自動マージン(autoマージン)を設定すると、コンテナ内の余った空きスペースがすべてそのマージンに吸収されます。その結果、要素は主軸方向の末端へ押し込まれます。flex-direction: column;の場合、これはコンテナの最下部を意味します。

構文

flexプロパティの基本的な構文は次のとおりです。

Selector {
    flex: /*値*/;
}

そして、要素を下部に配置する際に使用するのが、こちらのautoマージンの構文です。

Selector {
    margin-top: auto;
}

例1:テキスト要素をコンテナの下部に配置する

次の例では、縦方向のフレックスコンテナの中に複数のdiv要素を配置し、最後の要素(#d4)にのみmargin-top: auto;を適用しています。他の要素は上から順に並び、#d4だけがコンテナの底にくっつく形になります。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            display: flex;
            flex-direction: column;
            box-shadow: inset 0 0 6px aqua;
            margin: 2%;
            width: 30%;
            height: 15%;
         }
         #d2, #d3 {
            margin-left: 15%;
            margin-top: 5%;
            box-shadow: inset 0 0 6px green!important;
         }
         #d4 {
            box-shadow: inset 0 0 6px red!important;
            margin-top: auto;
         }
      </style>
   </head>
   <body>
      <div id="container">
         <div id="d1">ここにランダムなテキスト..</div>
         <div id="d2">こんにちは!!</div>
         <div id="d3">注目してください</div>
         <div id="d4">サンプル</div>
      </div>
   </body>
</html>

このコードの出力結果は以下のとおりです。

CSS Flexboxで要素をコンテナの下部に配置する方法

例2:画像を含む要素をコンテナの下部に配置する

今度は画像を含む要素に同じ手法を応用した例です。margin-top: auto;に加えてmargin-left: 50%;を組み合わせることで、画像をコンテナの右下寄りに配置している点にも注目してください。このようにautoマージンは、垂直方向だけでなく水平方向の調整にも活用できる柔軟なテクニックです。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            display: flex;
            flex-direction: column;
            box-shadow: inset 0 0 6px red;
            margin: 2%;
            width: 30%;
         }
         #d2, #d3 {
            margin-left: 15%;
            border-radius: 50%;
            padding: 5%;
            box-shadow: inset 0 0 6px green!important;
         }
         #d4 {
            margin-left: 50%;
            margin-top: auto;
         }
      </style>
   </head>
   <body>
      <div id="container">
         <div id="d1"><img src="https://images.pexels.com/photos/5512653/pexels-photo-5512653.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /></div>
         <div id="d2"></div>
         <div id="d3"></div>
         <div id="d4"><img src="https://images.pexels.com/photos/6032874/pexels-photo-6032874.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /></div>
      </div>
   </body>
</html>

このコードの出力結果は以下のとおりです。

CSS Flexboxで要素をコンテナの下部に配置する方法

まとめ:押さえておきたいポイント

  • 親要素(コンテナ)にはdisplay: flex;とflex-direction: column;を指定します。
  • 下部に配置したい子要素にmargin-top: auto;を設定すると、余った空き領域がすべてそのマージンに割り当てられます。
  • 水平方向の位置も調整したい場合は、margin-left: auto;やmargin-right: auto;を併用しましょう。
  • positionプロパティを使わないため、レイアウトが崩れにくく、レスポンシブデザインとの相性も抜群です。
  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

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

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