【保存版】CSS flexboxで要素をきれいに配置！flex-growとflex-shrinkの連携テクニック

値

flex-shrinkプロパティの値は、0から1までの数値で指定できます。

1: 要素は可能な限り縮小されます。
0: 要素は縮小されません。

デフォルト値

デフォルト値は 1 です。つまり、要素は可能な限り縮小されます。

例

以下の例では、3つの要素をFlexboxコンテナ内に配置しています。それぞれの要素にflex-shrinkプロパティを設定し、空きスペースをどのように吸収するかを指定しています。

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

.element1 {
  flex-grow: 1;
  flex-shrink: 0;
  width: 50px;
  background-color: red;
}

.element2 {
  flex-grow: 1;
  flex-shrink: 1;
  width: 50px;
  background-color: green;
}

.element3 {
  flex-grow: 1;
  flex-shrink: 2;
  width: 50px;
  background-color: blue;
}

この例では、element1はflex-shrink: 0に設定されているため、空きスペースを吸収しません。一方、element2とelement3はどちらもflex-shrinkが設定されているため、空きスペースを吸収します。しかし、element3はflex-shrink: 2に設定されているため、element2よりも多くの空きスペースを吸収します。

flex-shrinkプロパティは、古いブラウザではサポートされていない場合があります。
flex-shrinkプロパティは、すべてのFlexboxコンテナの子要素に適用されます。特定の子要素にのみ適用したい場合は、その要素にのみプロパティを設定する必要があります。
flex-shrinkプロパティは、flex-growプロパティと組み合わせて使用することで、要素の配置をより柔軟に制御できます。

例1：要素の縮小率を個別に設定

この例では、3つの要素をFlexboxコンテナ内に配置し、それぞれの要素にflex-shrinkプロパティを設定しています。

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

.element1 {
  flex-grow: 1;
  flex-shrink: 0;
  width: 50px;
  background-color: red;
}

.element2 {
  flex-grow: 1;
  flex-shrink: 1;
  width: 50px;
  background-color: green;
}

.element3 {
  flex-grow: 1;
  flex-shrink: 2;
  width: 50px;
  background-color: blue;
}

例2：flex-shrinkとflex-growを組み合わせて要素の配置を制御

この例では、2つの要素をFlexboxコンテナ内に配置し、flex-shrinkとflex-growプロパティを使用して、要素の配置を制御しています。

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

.element1 {
  flex-grow: 2;
  flex-shrink: 1;
  width: 50px;
  background-color: red;
}

.element2 {
  flex-grow: 1;
  flex-shrink: 1;
  width: 50px;
  background-color: green;
}

この例では、element1はflex-grow: 2に設定されているため、element2よりも多くの空きスペースを占有しようとします。しかし、flex-shrink: 1にも設定されているため、空きスペースが必要な場合は縮小することができます。

例3：flex-shrinkを使用して要素を非表示にする

この例では、要素を非表示にするためにflex-shrinkプロパティを使用しています。

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

.element1 {
  flex-grow: 1;
  flex-shrink: 1;
  width: 50px;
  background-color: red;
}

.element2 {
  flex-grow: 1;
  flex-shrink: 1;
  width: 50px;
  background-color: green;
}

.element3 {
  flex-grow: 0;
  flex-shrink: 2;
  width: 50px;
  background-color: blue;
}

この例では、element3はflex-grow: 0に設定されているため、空きスペースを占有しません。また、flex-shrink: 2にも設定されているため、空きスペースが必要な場合は縮小することができます。そのため、element3は他の要素が縮小されるまで非表示になります。

min-width と max-width プロパティ

min-width と max-width プロパティを使用して、要素の最小幅と最大幅をそれぞれ設定できます。これにより、要素が縮小される量を制限することができます。

利点：

古いブラウザでもサポートされている
シンプルで分かりやすい

欠点：

要素が空きスペースを吸収しない可能性がある
flex-shrink ほど柔軟ではない

例

.element {
  flex-grow: 1;
  min-width: 50px;
  max-width: 100px;
}

この例では、.element 要素は flex-grow: 1 に設定されているため、空きスペースを占有しようとします。しかし、min-width: 50px に設定されているため、50px 未満に縮小することはできません。また、max-width: 100px に設定されているため、100px 以上に拡大することはできません。

calc() 関数

calc() 関数を使用して、要素の幅を動的に計算することができます。これにより、空きスペースに応じて要素の幅を調整することができます。

複雑なレイアウトを作成できる
非常に柔軟

古いブラウザではサポートされていない可能性がある
理解するのが難しい

例

.element {
  flex-grow: 1;
  width: calc(50% - 25px);
}

この例では、.element 要素の幅はコンテナ幅の 50% マイナス 25px に設定されます。つまり、コンテナの幅が 200px の場合、.element 要素の幅は 100px になります。

グリッドレイアウト

グリッドレイアウトは、より複雑なレイアウトを作成する場合に適したレイアウトシステムです。グリッドレイアウトを使用して、要素をより細かく制御することができます。

複雑なレイアウトを作成できる
非常に柔軟

古いブラウザではサポートされていない可能性がある
Flexbox よりも習得するのが難しい

例

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

.element {
  grid-column: 1;
}

この例では、.grid-container 要素はグリッドコンテナとして定義され、.element 要素は最初の列に配置されます。minmax(50px, 1fr) は、各列の最小幅を 50px、最大幅をコンテナ幅の残りの部分に設定します。

どの方法を選択すべきか

どの方法を選択するかは、要件によって異なります。シンプルなレイアウトの場合は、min-width と max-width プロパティが適切な場合があります。より複雑なレイアウトの場合は、calc() 関数またはグリッドレイアウトを使用する方が適切な場合があります。

理解しやすさ：他の開発者がコードを理解しやすいようにしてください。
コードの簡潔性：コードをできるだけ簡潔に保つようにしてください。
ブラウザのサポート：使用するプロパティが古いブラウザでサポートされていることを確認してください。