枠の幅が折り返し不要な幅より大きくなった場合に枠幅をさらに広げる動作を指定する - flex-grow プロパティの利用 - CSS

Flexboxでflex-grow プロパティを利用して、枠の幅が折り返し不要な幅より大きくなった場合に枠幅をさらに広げる際の動作を指定するコードを紹介します。

概要

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

書式

flex-frow: (数値)

コード例

flex-grow.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="flex-grow.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-grow.css

.container {
    display: flex;
}

.frameA {
    border: 1px solid #e9006b;
    flex-grow: 5;
}
.frameB {
    border: 1px solid #ff6a00;
    flex-grow: 4;
}
.frameC {
    border: 1px solid #d0b106;
    flex-grow: 3;
}
.frameD {
    border: 1px solid #4aae20;
    flex-grow: 2;
}
.frameE {
    border: 1px solid #01b9b3;
    flex-grow: 1;
}

解説

frameA の flex-growを5、frameB の flex-growを4、frameC の flex-growを3、frameD の flex-growを2、frameE の flex-growを1、に設定しています。この設定により、枠の幅がテキスト表示に必要な幅より広くなった場合でも枠の幅がさらに広がる動作になります。このとき、枠の広がる度合いが、frameA : frameB : frameC : frameD : frameE = 5 : 4 : 3 : 2 : 1 の比率で広がる動作になります。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。ウィンドウ幅が狭い場合はそれぞれの枠は等幅で表示されます。

ウィンドウ幅を広げます。枠内のテキストの表示に折り返しが必要な状態では、枠の幅は等幅で表示されたままです。

枠内のテキスト表示が折り返し不要になる幅までは等幅で表示されます。

テキストの折り返しをせずに枠を表示するのに必要な幅以上にウィンドウサイズを広げると、各枠のサイズが広がります。枠のサイズ増加は frameA : frameB : frameC : frameD : frameE = 5 : 4 : 3 : 2 : 1 の比率になります。

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

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

flex-grow.css

.container {
    display: flex;
}

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

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

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

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

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

Webブラウザでページを表示します。ウィンドウ幅が狭い状態では先の場合と同様に各枠等幅で表示されます。