新着! 私の44ページの電子書籍「44分でわかるCSS」が発売されました! 😃

今すぐ入手 →

#flex-shrink

利用可能なスペースが足りない場合、フレックスボックスアイテムがどれだけ縮小するかを定義します。

デフォルト flex-shrink: 1;

コンテナの主軸に利用可能なスペースが足りない場合、要素は1の係数で縮小し、コンテンツを折り返します。

flex-shrink: 0;

要素は縮小しません。必要な幅を保持し、コンテンツを折り返しません。その兄弟要素は、ターゲット要素にスペースを与えるために縮小します。

ターゲット要素がコンテンツを折り返さないため、フレックスボックスコンテナのコンテンツがオーバーフローする可能性があります。

flex-shrink: 2;

flex-shrinkの値は相対的であるため、その動作はフレックスボックスアイテムの兄弟要素の値に依存します。

この例では、緑のアイテムは幅の100%を埋めたいと思っています。必要なスペースは、2つの兄弟要素から取得され4で分割されます。

  • 3分の1は色のアイテムから取得されます。
  • 1分の1は黄色色のアイテムから取得されます。