43.フレックスアイテムを知る②　～flex-shrink、縮めて押し込む～

昨日に引き続き、本日もフレックスアイテムのプロパティについてまとめて行きたいと思います。

因みに昨日の記事は以下

42.フレックスアイテムを知る～ボックスとは違うアイテムのプロパティ～ - web制作のしおり

では早速やっていきましょう。

アイテムの幅を縮めて、ボックスに納める～flex-shrink～

flex-shrinkはフレックスアイテムがフレックスボックスからはみ出してしまう場合に、フレックスアイテムを短く（横幅を小さく）することでフレックスボックス内に収めることができます。

例えば、

衣装ケースに服が入らない時に、畳んで、圧縮して詰め込む

あんなイメージのプロパティです。

flex-shrink : 1;

このプロパティにはflex-growと同じく数字を指定します。

デフォルトは1です。

この数値はフレックスアイテムがフレックスボックスに入り切らない時の縮む比率です。値が大きく設定されているアイテムほど、縮む割合が大きいです。

初期状態では全てのフレックスアイテムに１が設定されているので、入り切らない場合に全ての要素が同じ割合で縮むようになります。

因みにflex-shrink : 0;を設定した場合は全く縮みません。

具体例で確認して行きましょう。

まず今回使うフレックスボックスを用意します。

フレックスアイテムがwidth : 50px;で６つ、幅の合計が 50px × 6 = 300px

フレックスボックスのwidth : 300px;で、両者の幅はピッタリ一致しています。

全てが等しく縮む場合

では、フレックスボックスのwidthを240pxにしてみましょう。

フレックスアイテムの合計幅300pxに対して、フレックスボックス240pxなので

はみ出す幅は 300px - 240px = 60pxです。

そして、flex-shrink : 1がデフォルトで設定されているので、

フレックスアイテム全てで均等に縮みます。

アイテムの縮小幅は　はみ出す量 ÷ アイテム数→ 60px ÷ 6 =10pxです。

ですので、本来の幅 50pxから 10pxを差し引いた40pxになるわけです。

その結果、アイテムの幅の合計は

フレックスアイテムの幅 × 数→ 40px × 6 = 240pxとなり、

フレックスボックスの幅に収まりましたね。

１つだけ縮まない設定の場合

この状態でフレックスアイテムAのflex ; shrinkを0に設定した場合にどうなるのか確認しましょう。

まずフレックスアイテムの合計幅より、フレックスボックスの幅の方が小さいので

当然フレックスアイテムは小さくなります。

しかし、フレックスアイテムAはflex-shrink : 0;を設定しているので、

頑なに縮むことはありません。

ですので、はみだしてしまう60pxを残りの５つのフレックスアイテムで

吸収しなければいけません。

アイテムの縮小幅は、はみ出す量 ÷ アイテム数→ 60px ÷ 5 = 12pxです。

なので、50px - 12pxでフレックスアイテムA以外のアイテムの幅は38pxとなります。

その結果フレックスアイテムの合計幅は 50px + (38px ×5) =240pxとなり、

フレックスボックスの幅に収まります。

サイズが違うアイテムが混在して、等しく縮む場合(flex-shrink: 1)

フレックスアイテムAの幅を90pxに増やし、その他のアイテムは50px

flex-shrinkはデフォルトの1のままにした場合です。

フレックスボックスの幅はは240px、

フレックスアイテムの幅は90px + 50px * 5で340px

はみ出す幅は 340px - 240px = 100pxです。

では、100 ÷ 6 = 16.66....を各アイテムの幅から差し引けばOKってこと？

いいえ、違います。結果は以下のようになります。

え、どういうこと？と思ったそこのあなた。私も意味不明でした。

一見共通した値で計算されているように見えませんが、実は共通点があります。

「アイテムの幅が元の大きさから縮んだ割合が同じ」なのです。

確認してみましょう。

63.53 ÷ 90 = 0.705888....

35.3 ÷ 50 = 0.706

微差はありますが、元の大きさから29.4%小さくなっています。

これがflex-shrinkの本来の動きなんでしょう。

なんとしても「詰め込む」という感じが、面白いですね。

今日のまとめ

flex-shrinkはボックスに収まらないアイテムを縮める割合のプロパティ
デフォルト値は１。最初は平等にみんな縮む。
値を0にすると縮まなくなる。
縮む幅は同じ数値ではなく、元のアイテム毎に同じ割合元のサイズから縮む。

今日はflex-shrinkについて実際に動かしながら学習しました。

とにかく「詰め込んでやるぞ」という意気込みが伝わってくるようなプロパティでした。

ところで、CSSのcalcという関数をご存知ですか？

これを使うと、かなり柔軟にプロパティの値を指定できることを今日、知りました。

フレックスボックスが一段落したら記事にしたいと思います。

では、また。