flex-shrinkとは？flexboxで、はみ出る子要素を綺麗に修める方法

flex-boxでWebページのレイアウトを作成しているときに

といった疑問を持ったことがないでしょうか。

ここでは、flex-shrinkの

について解説します。

この記事が参考になれば幸いです。

flex-shrinkとは

flex-shrinkの読み方

flex-shrinkは「フレックスシュリンク」と読みます。フレックスはflex-boxのフレックスの意味、シュリンクは「縮む」の意味を持ちます。

flex-shrinkの説明

flex-shrinkを使うと、flexboxの子要素の幅（flex-directionにより高さの場合もあり）の合計が、親要素の幅を上回る際に、上回った幅をうまく切り分けることが出来ます。

flex-growというプロパティがありますが、その逆のような動作をします。

flex-shrinkで利用できる値

flex-shrinkでは以下の属性を使うことができます。

対応ブラウザ

対応ブラウザは以下の通りです。

flexboxで、はみ出る子要素を綺麗に修める方法

flex-shrinkの使い方

flex-shrinkは規定値が1であるため、子要素すべての幅を足し合わせた長さが、親要素の幅（flex-directionがcolumnの場合には高さ）を超える場合に動作します。

flexboxの子要素がはみ出る場合、はみ出た部分を子要素で均等に切り分けます。その、配分を変える際にflex-shrinkの値を設定します。

下記の例のように、子要素の幅が親要素を上回る場合には本来はみ出るが、flex-shrinkがデフォルトで効いているため、親要素の幅で収まります。

<p class=”codepen” data-height=”265″ data-theme-id=”dark” data-default-tab=”css,result” data-user=”writingyusuke” data-slug-hash=”jOMBBPa” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;” data-pen-title=”jOMBBPa”>
<span>See the Pen <a href=”https://codepen.io/writingyusuke/pen/jOMBBPa”>
jOMBBPa</a> by Yusuke (<a href=”https://codepen.io/writingyusuke”>@writingyusuke</a>)
on <a href=”https://codepen.io”>CodePen</a>.</span>
</p>
<script async src=”https://cpwebassets.codepen.io/assets/embed/ei.js”></script>

flex-shrinkが効いてしまうと困るので、効かなくさせたい場合

上記でも記した通り、flex-shrinkは規定値で1が設定されるので、基本的には効いてしまいます。

逆に、flex-shrinkを聞かないようにして、はみ出させたい場合には、すべての子要素のflex-shrinkを0に設定する必要があります。

flex-shrinkを利用する場合に、間違えてしまう仕様

flex-shrinkは子要素を、指定した比率にサイズを可変させるものではありません。

あくまで、親要素からはみ出たサイズを指定した比率に切り分ける、その切り分けた幅をそれぞれの子要素で縮めるという仕様です。

そのため、子要素にflex-shrinkを、１対１対２のように設定しても、子要素の幅が１対１対２に綺麗に収まるものではありません。

要素と要素のサイズをきっちりと分けたい場合には、子要素のWidthをパーセントで指定するなど、別の方法を利用する方が良いです。

flex-shrinkが効かないときの対処法

flex-shrinkを設定したのに聞かないといった場合には以下の点を見直してみましょう。

すでに効いているが変化が起きなかったため、効いていないように見える可能性があります

flex-shrinkは規定値で1が指定されています。そのため、何も指定しなくても親要素にdisplay:flex;を指定した時点でflex-shrinkは効いています。

flex-shrinkは他要素との比率で動作が変わるため、一つの要素だけ極端に大きい数字などを入れてみて確認をしてみてください。

子要素以外の要素のflex-shrinkを変更している

flex-shrinkは子要素に設定するプロパティです。そのため、孫要素やひ孫要素など、更に下の階層で指定しても効果がありません。

子要素のflex-shrinkであるかを確認してください。

親要素の幅を子要素がはみ出していない

flex-shrinkは、子要素のすべての幅の合計が、親要素をはみ出る場合にそのはみ出た幅を切り分けて、子要素が縮小するという仕様です。

そのため、親要素をはみ出ていないとflex-shrinkが効きません。

flexというプロパティやflex-growが設定されていないかを確認

flex-growは親要素の幅に子要素の幅が足りない場合に、伸びる割合を指定するプロパティです。こちらのプロパティが効いていないかを確認すると良いでしょう。

また、flexというプロパティではflex-shrinkやflex-grow、flex-basisなどを指定できるため、上書きされていないかの確認もしてください。

まとめ

いかがでしたでしょうか。

flex-shrinkはflexやflex-grow、flex-basisなどとセットで設定されるプロパティです。

flexboxでは、子要素を簡単に横並びに設定できるようになります。flex-shrinkはその子要素の幅を制御するプロパティの一つとして覚えておきましょう。

思い通りにWebページを作るには、子要素を並べる方法をたくさん知っているほど自由に、早くWebページ構築をすることが出来ます。

この記事が参考になれば、幸いです。