枠の幅が折り返し不要な幅より小さくなった場合に枠幅をどの程度縮めるかの動作を指定する - flex-shrink プロパティの利用 - CSS

Flexboxで枠の幅が折り返し不要な幅より小さくなった場合に枠幅をどの程度縮めるかの動作を指定するコードを紹介します。

概要

Flexboxで枠の幅が折り返し不要な幅より小さくなった場合に枠幅をどの程度縮めるかを指定するには、flex-shrink プロパティを利用します。

書式

flex-shrink: (数値)

コード例

flex-shrink.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="flex-shrink.css" />
</head>
<body>
  <div class="container">
    <div class="frameA">1番目のコンテンツ<br />あいうえお<br />かきくけこ</div>
    <div class="frameB">2番目のコンテンツ<br />αβγ<br /></div>
    <div class="frameC">3番目のコンテンツ<br />ABCDE<br />FGHIJK</div>
    <div class="frameD">4番目のコンテンツ<br />いろはに<br />ほへと</div>
    <div class="frameE">5番目のコンテンツ<br />12345<br />67890</div>
  </div>
</body>
</html>

flex-shrink.css

.container {
    display: flex;
}

.frameA {
    border: 1px solid #e9006b;
    flex-shrink: 1;
}

.frameB {
    border: 1px solid #ff6a00;
    flex-shrink: 2;
}

.frameC {
    border: 1px solid #d0b106;
    flex-shrink: 3;
}

.frameD {
    border: 1px solid #4aae20;
    flex-shrink: 4;
}

.frameE {
    border: 1px solid #01b9b3;
    flex-shrink: 5;
}

解説

frameA の flex-shrinkを1、frameB の flex-shrinkを2、frameC の flex-shrinkを3、frameD の flex-shrinkを4、frameE の flex-shrinkを5、に設定しています。この設定により、枠の幅がテキスト表示に必要な幅より狭くなった場合、枠の幅をどの程度縮めるかの動作を指定できます。枠の幅の狭まる度合いが、frameA : frameB : frameC : frameD : frameE = 1 : 2 : 3 : 4 : 5 の比率で狭まります。(frameA より frameE のほうが大きく縮まります。)

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

ウィンドウ幅を縮めます。折り返しが不要な状態までは各枠の幅はコンテンツが折り返し不要で表示できる幅のままです。

さらにウィンドウ幅を縮めると、内部のテキストが折り返し表示になり枠の幅が縮まります。

さらに枠の幅を縮めます。「1番目のコンテンツ」の枠より「5番目のコンテンツ」の枠のほうが幅が大きく縮まっていることがわかります。

さらに幅を縮めると変化の度合いがよくわかります。

枠の幅の狭まる度合いが、frameA : frameB : frameC : frameD : frameE = 1 : 2 : 3 : 4 : 5 の比率で狭まっていることが確認できます。

一つの枠のみにflex-shrink を指定した場合の動作

CSSを下記に変更し、flex-shrink を一つの枠にのみ指定します。

flex-shrink.css

.container {
    display: flex;
}

.frameA {
    border: 1px solid #e9006b;
    flex-shrink: 5;
}

.frameB {
    border: 1px solid #ff6a00;
}

.frameC {
    border: 1px solid #d0b106;
}

.frameD {
    border: 1px solid #4aae20;
}

.frameE {
    border: 1px solid #01b9b3;
}

Webブラウザでページを表示します。ウィンドウ幅が広い状態では先の場合と同様に各枠とも、折り返しが不要な幅で表示されます。