【上級者向け】FlexboxレイアウトとJavaScriptで子要素を動的に縮小する方法

CSS Miscellaneousにおけるflex-shrinkの解説

flex-shrinkは、以下の状況で機能します。

• 親要素の幅が、flex-basisで設定された子要素の合計幅よりも小さい場合
• flex-wrapプロパティがno-wrapに設定されている場合

これらの条件を満たす場合、flex-shrinkの値に応じて、子要素が縮小されます。

flex-shrinkは、数値で指定します。

• 0: 子要素は縮小されません。
• 1: 子要素は、他の要素と同じ割合で縮小されます。

このように、flex-shrinkの値を大きくするほど、子要素は縮小されます。

flex-shrinkの例

以下の例では、3つの子要素がflex-grow: 1で設定されています。

.container {
  display: flex;
  width: 300px;
}

.item {
  flex-grow: 1;
}

.item-1 {
  flex-shrink: 0;
}

.item-2 {
  flex-shrink: 1;
}

.item-3 {
  flex-shrink: 2;
}

この場合、item-1は縮小されず、item-2とitem-3はそれぞれ1:2の割合で縮小されます。

[300px]
|-----|-----|-----|
| item-1 | item-2 | item-3 |
| 100px | 100px | 100px |

• flex-shrinkは、flex-basisが0の場合には機能しません。
• flex-wrapがwrapの場合、子要素は折り返されるため、flex-shrinkは機能しません。

まとめ

flex-shrinkは、Flexboxレイアウトで子要素を縮小する際に役立つプロパティです。flex-growと組み合わせることで、より柔軟なレイアウトを実現することができます。

flex-shrinkのサンプルコード

子要素を等幅で縮小する

.container {
  display: flex;
  width: 300px;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
}

[300px]
|-----|-----|
| item-1 | item-2 |
| 150px | 150px |

子要素を優先的に縮小する

.container {
  display: flex;
  width: 300px;
}

.item {
  flex-grow: 1;
}

.item-1 {
  flex-shrink: 2;
}

.item-2 {
  flex-shrink: 1;
}

この場合、item-1はflex-shrink: 2で、item-2の2倍の割合で縮小されます。

[300px]
|-----|-----|
| item-1 | item-2 |
| 100px | 200px |

子要素を縮小させない

.container {
  display: flex;
  width: 300px;
}

.item {
  flex-grow: 1;
}

.item-1 {
  flex-shrink: 0;
}

.item-2 {
  flex-shrink: 1;
}

この場合、item-1はflex-shrink: 0で、縮小されません。item-2のみがflex-shrink: 1で縮小されます。

[300px]
|-----|-----|
| item-1 | item-2 |
| 300px | 0px |

flex-basisと組み合わせて使う

.container {
  display: flex;
  width: 300px;
}

.item {
  flex-grow: 1;
}

.item-1 {
  flex-shrink: 1;
  flex-basis: 200px;
}

.item-2 {
  flex-shrink: 1;
  flex-basis: 100px;
}

この場合、item-1はflex-basis: 200pxで、200px以下には縮小されません。item-2はflex-basis: 100pxで、100px以下には縮小されません。

[300px]
|-----|-----|
| item-1 | item-2 |
| 200px | 100px |

flex-wrapと組み合わせて使う

.container {
  display: flex;
  width: 300px;
  flex-wrap: wrap;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
}

この場合、flex-wrap: wrapで、子要素は折り返されます。flex-shrinkは、折り返された行の中で機能します。

[300px]
|-----|-----|
| item-1 | item-2 |
|-----|-----|
| item-3 | item-4 |

Flexboxレイアウトで子要素を縮小する他の方法

min-widthとmax-widthを使って、子要素の最小幅と最大幅を指定することができます。

.item {
  min-width: 100px;
  max-width: 300px;
}

この場合、子要素は100px以下には縮小されず、300px以上には伸長されません。

calc()を使って、子要素の幅を動的に計算することができます。

.item {
  width: calc(50% - 20px);
}

この場合、子要素は親要素の幅の50%から20pxを引いた幅になります。

media queryを使って、画面サイズに応じて子要素の幅を変えることができます。

@media (max-width: 768px) {
  .item {
    width: 100%;
  }
}

この場合、画面サイズが768px以下の場合は、子要素は100%幅になります。

JavaScriptを使って、子要素の幅を動的に変更することができます。

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

function resizeItems() {
  for (const item of items) {
    item.style.width = `${Math.floor(window.innerWidth / 2)}px`;
  }
}

window.addEventListener('resize', resizeItems);

resizeItems();

この場合、JavaScriptを使って、子要素の幅をウィンドウ幅の半分に設定しています。

• 簡単なレイアウトの場合は、min-widthとmax-widthを使うのがおすすめです。
• より複雑なレイアウトの場合は、calc()やmedia queryを使うと便利です。
• 動的に子要素の幅を変えたい場合は、JavaScriptを使う必要があります。

Flexboxレイアウトで子要素を縮小するには、flex-shrink以外にも様々な方法があります。それぞれの方法の特徴を理解して、状況に応じて使い分けましょう。