CSS

on Note

flex-shrink flexアイテムが縮む割合を指定する

flexコンテナの幅の都合上、flexアイテムが縮む必要がある時、それぞれをどれだけ縮ませるかという割合をflex-shrinkプロパティで指定します。

ここでは、flex-shrinkの使い方を説明しています。

flex-shrinkプロパティの概要

書式
flex-shrink: 値;
初期値
1
指定できる値
0、正の数値
継承
しない
指定先
flexアイテム

値に「0」を指定した場合、縮小係数が「0」ということなので、そのflexアイテムは縮みません。

初期値が「1」なので、flexアイテムの合計の寸法がflexアイテムの幅よりも大きくなる場合、flexアイテムは自動的に縮みます。

<ul class="flex_container">
    <li>メニューメニュー</li>
    <li>メニューメニュー</li>
    <li>メニューメニュー</li>
</ul>
.flex_container {
    display: flex;
    list-style-type: none;
}
.flex_container li {
    background-color: #ffb;
    padding: 5px;
    border: solid 1px #888;
}

これは次のように表示されます。flexコンテナの幅は、flexアイテムの合計の寸法よりも余裕がある場合、flexアイテムは縮みません。

  • メニューメニュー
  • メニューメニュー
  • メニューメニュー

次はflexコンテナにwidthプロパティで幅の指定をします。flexアイテムの合計の寸法がflexコンテナの幅よりも大きくなるようにしました。

.flex_container {
    display: flex;
    width: 300px;
    中略
}

各flexアイテムが縮んで次のように表示されます。

  • メニューメニュー
  • メニューメニュー
  • メニューメニュー

flexアイテムの合計の寸法がflexコンテナの幅よりも大きくなった為、各flexアイテムは縮みました。

この見本ではflex-shrinkを指定していませんが、flex-shrinkプロパティの初期値が「1」なので、デフォルトでflex-shrink: 1;が存在しています。なので自動的に縮むわけです。

flex-shrinkを指定する

flex-shrinkプロパティの値は縮小係数を表しています。なので全てのflexアイテムに対して、flex-shrinkの値を同じにした時、縮む結果は全て同じになります。

<ul class="flex_container">
    <li>メニューメニュー</li>
    <li>メニューメニュー</li>
    <li>メニューメニュー</li>
</ul>
.flex_container {
    display: flex;
    width: 300px;
    中略
}
.flex_container li {
    flex-shrink: 2;
    中略
}

それぞれのflexアイテムにflex-shrink: 2;を指定した形です。

  • メニューメニュー
  • メニューメニュー
  • メニューメニュー

どのflexアイテムも、flex-shrinkの値が同じ「2」なので、全てが同じ縮み率になりました。値を「3」にしようが「5」にしようが、どのflexアイテムも同じ縮み率である以上、表示結果は同じです。

では次に、個々のflexアイテムで、違うflex-shrinkの値を指定してみます。

個々のflex-shrinkを異なる値にする

<ul class="flex_container">
    <li>メニューメニュー</li>
    <li>メニューメニュー</li>
    <li>メニューメニュー</li>
</ul>
.flex_container {
    display: flex;
    width: 300px;
    中略
}
.flex_container li:nth-of-type(1) {
    flex-shrink: 1;
}
.flex_container li:nth-of-type(2) {
    flex-shrink: 2;
}
.flex_container li:nth-of-type(3) {
    flex-shrink: 3;
}

擬似クラスを使って、flex-shrinkの値をそれぞれ「1」「2」「3」としました。表示結果は次の通りです。

  • メニューメニュー
  • メニューメニュー
  • メニューメニュー

それぞれ、指定した割合に沿って縮みました。縮小係数が一番大きい3番目の li要素が一番縮みます。

まとめ

flex-shrinkでは、flexアイテムの縮む割合を設定します。値は縮小係数を表しており、正の数値で指定します。初期値は「1」です。

flex-shrinkプロパティは、flexアイテムに対して指定します。