Flexbox で簡単！子要素を親要素にぴったりフィットさせる

2024-05-23

CSS Flexbox で子要素を交差軸方向に伸縮させる方法

align-items: stretch を使用する

これは最も簡単な方法で、親要素の align-items プロパティを stretch に設定するだけです。

.parent {
  display: flex;
  align-items: stretch;
}

この設定により、すべての Flexbox 子要素が、親要素の空きスペースに合わせて自動的に伸縮されます。

flex-grow プロパティを使用して、個々の子要素の伸縮量を制御することもできます。値が大きいほど、その要素はより多く伸縮されます。

.child1 {
  flex-grow: 1;
}

.child2 {
  flex-grow: 2;
}

この例では、.child2 は .child1 よりも 2 倍多く伸縮されます。

align-self を使用する

特定の子要素のみを伸縮させたい場合は、その要素の align-self プロパティを stretch に設定できます。

.child1 {
  align-self: stretch;
}

この設定は、.parent の align-items プロパティの設定を上書きします。

子要素に min-height と max-height を設定することで、伸縮する範囲を制限することができます。

.child {
  flex-grow: 1;
  min-height: 50px;
  max-height: 100px;
}

この例では、.child は親要素の空きスペースに合わせて伸縮しますが、高さが 50px 未満になることはなく、100px を超えることもありません。

注意点

これらの方法は、Flexbox レイアウトがサポートされているブラウザでのみ機能します。
子要素が伸縮しない場合は、flex-shrink プロパティを 0 に設定する必要がある場合があります。
複数の方法を組み合わせることもできます。

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>
    .parent {
      display: flex;
      flex-direction: row; /* 横並びに配置 */
      height: 200px; /* 親要素の高さを設定 */
      background-color: #ccc;
      padding: 10px;
    }

    .child {
      flex-grow: 1; /* 子要素を伸縮させる */
      background-color: #eee;
      margin: 5px;
    }

    .child1 {
      width: 50px; /* 最初の要素に固定幅を設定 */
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child child1">子要素 1</div>
    <div class="child">子要素 2</div>
    <div class="child">子要素 3</div>
  </div>
</body>
</html>

説明

このコードでは、以下のことが行われています。

親要素 (`

CSS Flexbox で子要素を交差軸方向に伸縮させるその他の方法

justify-content: space-around を使用する

この方法は、子要素を親要素の両端に余白を設けて配置する方法です。

.parent {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: 200px;
  background-color: #ccc;
  padding: 10px;
}

.child {
  flex-grow: 1;
  background-color: #eee;
}

.parent {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 200px;
  background-color: #ccc;
  padding: 10px;
}

.child {
  flex-grow: 1;
  background-color: #eee;
}

calc() 関数を使用して、子要素の幅を親要素の空きスペースに合わせて動的に計算する方法です。

.parent {
  display: flex;
  align-items: stretch;
  height: 200px;
  background-color: #ccc;
  padding: 10px;
}

.child {
  flex: 1 0 auto; /* 子要素の初期サイズを 0 に設定 */
  width: calc(50% - 10px); /* 子要素の幅を親要素の 50% - 余白に設定 */
  background-color: #eee;
  margin: 5px;
}

グリッドレイアウトを使用する

Flexbox 以外にも、グリッドレイアウトを使用して子要素をレイアウトすることもできます。グリッドレイアウトは、より複雑なレイアウトを作成するのに適しています。

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); /* 子要素の幅を 50px 以上、親要素の空きスペースに合わせて伸縮するように設定 */
  align-items: stretch;
  height: 200px;
  background-color: #ccc;
  padding: 10px;
}

.child {
  background-color: #eee;
  margin: 5px;
}