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

flex-shrink-eye

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

子要素の幅が勝手に縮んで表示されている
この動作を変更するにはどうすればよいのか

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

ここでは、flex-shrinkの

・基本的な使い方
・子要素がはみ出る場合、親要素に綺麗に修める方法
・flex-shrinkが効かないときの対処法

について解説します。

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

flex-shrinkとは

flex-shrink01

flex-shrinkの読み方

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

flex-shrinkの説明

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

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

メモ
flex-growとの違いは、flex-shrinkの規定値が1であることです。

規定値が1であるため、flexboxを指定しただけで、flex-shrinkが効いている状態になります。flexboxを指定すると、親要素に幅が指定されていると、子要素がはみ出してもおさまるようになっています。

flex-shrinkで利用できる値

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

属性 説明
数値 flexboxの子要素が縮む幅の比率を設定
規定値は1

対応ブラウザ

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

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
10~
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

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を0に指定していない子要素がある場合には、flex-shrinkが効いてしまいます。

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

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

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

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

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

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

flex-shrink02

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ページ構築をすることが出来ます。

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