【CSS】flex-shrinkでflexアイテムを縮小させる方法を解説

flex-shrink は任意のflexアイテムを縮小させるプロパティです。flex-shrink を使用すれば、height や width を使用するよりも自在にflexアイテムを縮小できるため、効率よくコーディングを行えます。

この記事では flex-shrink の使い方を解説します。

flex-shrink はflexboxプロパティの一種です。flexboxは一つのプロパティだけでなく全体的に学ぶことが大切です。しかし、学習に詰まりやすい部分でもあります。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

ZeroPlus Gateの詳細を見る

flex-shrinkとは

flex-shrink は、flexアイテムの縮小率を設定できるプロパティです。

flexアイテムには親要素の幅を超えるときに均等な幅となる性質があります。そこで flex-shrink を使用すれば、親要素の幅からはみ出た部分を縮小することができます。

flex-shrink は、主に以下のような場面で使用します。

• flexアイテムがflexコンテナ（親要素）からはみ出す場合
• 要素を縮めたくない場合

flex-shrink では要素を縮めるだけではなく、「縮めない」指定も可能です。詳しくは次項の「 flex-shrink の使い方」で解説します。

flex-shrinkの使い方

flex-shrink はflexアイテムに対して有効なプロパティであるため、親要素に display: flex; を、子要素に flex-shrink をそれぞれ指定します。

flex-shrink の基本形は以下のとおりです。

.flexbox {
  display: flex;
}

.flex-item {
  color: #fff;
  flex-shrink: 数値;
}

flexアイテムがflexコンテナをはみ出す場合

まずは、flexアイテムがflexコンテナ（親要素）の幅をはみ出す場合の使い方を見てみましょう。

以下のような状態だとします。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
</div>

.flexbox {
  display: flex;
  text-align: center;
  border: 1px solid #000;
  width: 70%;
}

.flex-item {
  color: #fff;
  width: 40%;
}

.item01 {
  background: red;
}

.item02 {
  background-color: blue;
}

.item03 {
  background-color: green;
}

このとき、flexアイテムは見かけ上均等な大きさになっていますが、これはflexアイテムの性質によるものです。flexアイテムは flex-shrink の初期値が1であるため、親要素の幅内を超える場合は自動的に縮小し、幅内に収まります。

flex-shrink: 1;を指定しなくても、flexboxを指定しただけでflex-shrinkが効いている状態になります。

上記の例の場合、flexコンテナの幅が親要素に対して70%、flexアイテムはそれぞれ40%と指定しているので、20%分オーバーしています。

かめるん先生

widthは親要素に対して40%のサイズになります！

40% × 3要素 = 120%となり、20%がオーバーしていることになります！

flex-shrink の値を変えて、それぞれの縮小量を変更してみます。

.item01 {
  background: red;
  flex-shrink: 1;
}

.item02 {
  background-color: blue;
  flex-shrink: 2;
}

.item03 {
  background-color: green;
  flex-shrink: 3;
}

flex-shrink の値を変えた結果、それぞれの要素は、

• item01 は少しだけ縮む（flex-shrink: 1; )
• item02 はitem01の2倍縮む（flex-shrink: 2; )
• item03 はitem01の3倍縮む（flex-shrink: 3; )

flex-shrink: 1; を適用した要素を基準にすると、flex-shrink: 2; は2倍の割合で縮み、flex-shrink: 3; は3倍の割合で縮みます。

かめるん先生

要素自体の大きさは単純に 1 : 2 : 3 となっているわけではありません！flex-shrink は「どれくらい縮むか」の数値で、要素自体の大きさの指定ではないからです！

要素を縮めたくない場合 

CSSのレイアウトでは、要素や画像とテキストを横並びにする実装を行うことがよくありますが、テキストが長いと要素や画像が縮んでしまいます。

要素を縮めたくない場合は、縮めたくない要素に flex-shrink: 0; を指定することで解決できます。

実際の例を見てみましょう。

要素が縮む場合

左側の要素には flex-shrink を指定していないため、要素に指定した width が反映されずに縮んで表示されています。flex-shrink: 0; を指定することで、指定した width が反映されるようになります。

<div class="flexbox">
  <p class="text">テキスト</p>
  <p class="copy">テキストが長くなると、左の要素が縮んでしまったり</p>
</div>

<div class="shikaku"></div>

.flexbox {
  display: flex;
  width: 30%;
  border: 1px solid #000;
  align-items: center;
}

.text {
  width: 100px;
  height: 100px;
  background: orange;
  flex-shrink: 0; /*縮めたくない要素に指定*/
}


.copy {
  margin-left: 10px;
}

画像が潰れる場合

画像の場合でも、解決方法は同様です。画像が縮んでしまう場合は、その画像に flex-shrink: 0; を指定しましょう。

<div class="flexbox">
  <div class="img-container">
    <img src="img/草原の写真.jpg" alt="" class="flex-img">
  </div>
  <p class="copy">画像にwidthを指定しても思い通りの横幅にならず、画像が縮んでしまったりします。</p>
</div>

<div class="shikaku"></div>

.flexbox{
  display: flex;
  width: 20%;
  border: 1px solid #000;
  align-items: center;
}

img{
  width: 100%;
  height: auto;
}

.img-container{
  width: 100px;
  flex-shrink: 0;
}

.shikaku{
  border: 1px solid #000;
  width: 100px;
  height: 100px;
}

flex-shrinkプロパティはflexbox前提で扱うプロパティです。こちらの記事でflexboxの基礎知識の解説をしているので、学習にお役立てください。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

flex-shrinkに関連するプロパティ

flex-shrink には、以下のような関連するプロパティが存在します。

flex-grow

flex-grow は、flexアイテムの伸長率を指定するプロパティです。flex-shrink とは違い、flexコンテナに余白がある場合に有効です。

flexアイテムの大きさを効率的に指定できるようになるので、併せて学習してみましょう。

【CSS】flex-growの使い方！flexアイテムの大きさを倍率で指定する方法を解説

flex-basis

flex-basis は、flexアイテムの大きさそのものを指定するプロパティです。flex-basis の値は flex-shrink や flex-grow の基準の値となります。

【CSS】flex-basisの使い方を解説！widthやheightとの違いは？

flex

flex は、flex-grow、flex-shrink、flex-basis を同時に指定できるプロパティです。指定する数値の数や単位の有無によって、プロパティの意味が変わります。使いこなせばCSSコーディングの効率が格段に上がるので、ぜひ学習してみてください。

【CSS】flexアイテムの大きさと伸縮を一括指定する方法を解説

まとめ

flex-srhink はflexアイテムを縮小させるプロパティです。flexアイテム全体の幅が親要素の幅を超えるときに、はみ出た部分を縮小させる比率を指定します。

flex-shrink は任意のflexアイテムだけ縮小したいときやレスポンシブ対応時に有用ですので、使いこなせるようになりましょう。

flex-shrinkまとめ

• flexアイテムを縮小させるプロパティ
• display: flex; と併用する
• 親要素からはみ出た部分を縮小させる比率を指定する

flex-shrinkの値による挙動の違い

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

ZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー