Flexbox と calc() 関数を使って親コンテナの残りのスペースを子要素に分配する

2024-04-23

CSS で Flexbox を使って残りの垂直スペースを埋める方法

このチュートリアルでは、Flexbox と flex-grow プロパティを使用して、親コンテナ内の残りの垂直スペースを要素に均等に分配する方法を説明します。

例:

以下の HTML スニペットは、親コンテナ (.container) と 3 つの子要素 (.item) を定義します。

<div class="container">
  <div class="item">アイテム 1</div>
  <div class="item">アイテム 2</div>
  <div class="item">アイテム 3</div>
</div>

以下の CSS スニペットは、親コンテナの高さを 100vh (ビューポートの高さを 100%) に設定し、子要素の高さを 0 に設定し、flex-grow プロパティを 1 に設定します。これにより、残りの垂直スペースが子要素に均等に分配されます。

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.item {
  height: 0;
  flex-grow: 1;
}

結果:

この CSS を適用すると、3 つのアイテムが均等に親コンテナの残りの垂直スペースを埋め、親コンテナの高さが 100vh に設定されます。

補足:

flex-direction: column プロパティは、子要素を縦方向に並べます。
flex-grow プロパティは、残りのスペースをどれだけ要素が占有するかを決定します。値が高いほど、要素はより多くのスペースを占有します。
flex-shrink プロパティは、残りのスペースが不足したときに要素がどれだけ縮小されるかを決定します。値が高いほど、要素はより多く縮小されます。

HTML:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox で残りの垂直スペースを埋める</title>
  <style>
    .container {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .item {
      height: 0;
      flex-grow: 1;
      background-color: #ccc;
      margin: 10px;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">アイテム 1</div>
    <div class="item">アイテム 2</div>
    <div class="item">アイテム 3</div>
  </div>
</body>
</html>

CSS:

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.item {
  height: 0;
  flex-grow: 1;
  background-color: #ccc;
  margin: 10px;
  text-align: center;
  padding: 20px;
}

説明:

HTML:
- <!DOCTYPE html>: HTML5 ドキュメントであることを宣言します。
- <html lang="ja">: ルート HTML 要素。lang 属性は言語を日本語に設定します。
- <head>: メタデータを含むドキュメントのヘッダーセクション。
- <meta charset="UTF-8">: 文字エンコーディングを UTF-8 に設定します。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: ビューポートの設定。この設定は、デバイスの幅にビューポートの幅を一致させ、初期ズームを 1.0 に設定します。
- <title>Flexbox で残りの垂直スペースを埋める</title>: ドキュメントのタイトル。
- <style>: スタイル定義を含むドキュメントのスタイルセクション。
  - .container: 親コンテナのスタイル。
    - height: 100vh;: 親コンテナの高さをビューポートの高さの 100% に設定します。
    - display: flex;: Flexbox レイアウトを有効にします。
  - .item: 子要素のスタイル。
    - height: 0;: 子要素の初期の高さを 0 に設定します。
    - flex-grow: 1;: 子要素が残りの垂直スペースを占有するように設定します。
    - background-color: #ccc;: 背景色を薄灰色に設定します。
    - margin: 10px;: 子要素の周りに余白を設定します。
    - text-align: center;: テキストを中央揃えにします。
- </head>: ヘッダーセクションの終了。
- <body>: ドキュメントの本文セクション。
- <div class="container">: 親コンテナ要素。
  - <div class="item">アイテム 1</div>: 子要素 1。
- </div>: 親コンテナ要素の終了。
- </html>: HTML ドキュメントの終了。
CSS:

Flexbox 以外の方法で残りの垂直スペースを要素に割り当てる方法

min-height と calc() を使う

この方法は、親コンテナの min-height プロパティと calc() 関数を使用して、残りの垂直スペースを子要素に分配します。

<div class="container">
  <div class="item">アイテム 1</div>
  <div class="item">アイテム 2</div>
  <div class="item">アイテム 3</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.item {
  flex: 1;
  margin: 10px;
  background-color: #ccc;
  text-align: center;
  padding: 20px;
}

grid-layout は、Flexbox よりも強力で柔軟なレイアウトモジュールです。残りの垂直スペースを要素に割り当てるために使用することもできます。

<div class="container">
  <div class="item">アイテム 1</div>
  <div class="item">アイテム 2</div>
  <div class="item">アイテム 3</div>
</div>

.container {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.item {
  background-color: #ccc;
  text-align: center;
  padding: 20px;
}

display: grid;: 親コンテナにグリッドレイアウトを適用します。
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));: 子要素を自動的に行に配置し、各行の高さを最小 100px、最大 1fr (親コンテナの残りのスペース) に設定します。
gap: 10px;: 子要素間の余白を 10px に設定します。

table を使う

古い方法ですが、残りの垂直スペースを要素に割り当てるために table レイアウトを使用することもできます。

<table>
  <tr>
    <td>アイテム 1</td>
  </tr>
  <tr>
    <td>アイテム 2</td>
  </tr>
  <tr>
    <td>アイテム 3</td>
  </tr>
</table>

table {
  height: 100vh;
}

td {
  vertical-align: top;
  background-color: #ccc;
  text-align: center;
  padding: 20px;
}

vertical-align: top;: セルのコンテンツを上部に配置します。

JavaScript を使用して、残りの垂直スペースを要素に動的に割り当てることもできます。

<div class="container">
  <div class="item">アイテム 1</div>
  <div class="item">アイテム 2</div>
  <div class="item">アイテム 3</div>
</div>

const container = document.querySelector('.container');
const items = document.querySelectorAll('.item');

const availableHeight = container.offsetHeight - items.length * 10; // 余白と余白を除く高さ
const itemHeight = availableHeight / items.length; // アイテムの高

for (const item of items) {
  item.style.height = itemHeight + 'px';
}

offsetHeight: 親コンテナの高さ (余白を含む) を取得します。
querySelectorAll: 子要素のリストを取得します。

css layout flexbox