ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】flex-shrinkでflexアイテムを縮小させる方法を解説

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

HTML/CSS

2022/05/11

2024/01/30

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

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

この記事で身につく内容

flex-shrink とは
flex-shrink の使い方
flex-shrink に関連するプロパティ

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

こちらの記事でflexboxの基礎知識の解説をしているので、学習にお役立てください。

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

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

flex-shrinkとは
flex-shrinkの使い方
- flexアイテムがflexコンテナをはみ出す場合
- 要素を縮めたくない場合
flex-shrinkに関連するプロパティ
まとめ

flex-shrinkとは

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

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

flex-shrink を使用する場面は、以下の2通りあります。

要素を縮めたいとき
要素を縮めたくないとき

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

flex-shrinkの使い方

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

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

.flexbox {
display: flex;
}

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

初期値は 1 で、マイナスの値は指定できません。

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

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

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コンテナの幅が親要素に対して70%、flexアイテムはそれぞれ40%と指定しているので、20%分オーバーしています。
※widthの指定は親要素に対して40%のサイズとなります。40% × 3要素 = 120%となり20%がオーバーしていることになります。

これを、以下のように指定します。

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

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

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

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

要素を縮めたくない場合

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

CSSのレイアウトでは、以下のような実装を行うことがよくあります。

要素とテキストを横並びにしている
画像とテキストを横並びにしている

このようなとき、テキストが長いと要素や画像が縮んでしまいます。

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

要素が縮む場合

左側の要素には flex-shrink を指定していないため、要素に指定した width が反映されずに縮んで表示されています。flex-shrinik: 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;
}