Flexbox の枠の幅を指定する - flex-basis プロパティの利用 - CSS

Flexbox の枠の幅を指定するCSSのコードを紹介します。

概要

Flexboxの枠の幅を指定する場合は、flex-basisプロパティを利用します。

コード

下記のHTML, CSSファイルを作成します。

flex-basis.css

.container {
    display: flex;
}

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

.frameB {
    border: 1px solid #ff6a00;
    flex-basis: 128px;
}

.frameC {
    border: 1px solid #d0b106;
    flex-basis: 194px;
}

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

.frameE {
    border: 1px solid #01b9b3;
    flex-basis: 320px;
}

flex-basis.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="flex-basis.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-basis プロパティにflexboxの枠の幅の基本値を設定します。今回の例では、左の枠から順に 64pixel, 128pixel, 194pixel, 256pixel, 320pixel の値で設定しています。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。枠の幅よりWebブラウザのウィンドウ幅が広い場合には、指定された枠のサイズで表示されます。下図では、左から順に64pixel, 128pixel, 194pixel, 256pixel, 320pixel の幅で枠が表示されています。

ウィンドウの幅を狭めても、枠幅より広い場合は、枠の幅は変わりません。

枠の幅の合計よりウィンドウ幅が狭くなった場合は、枠の幅が縮まります。

flex-shrinkプロパティに値を設定していないため、各枠とも同じ比率で枠の幅が縮まります。枠ごとに枠の縮小度合いを変更する場合は、flex-shrinkプロパティを設定します。flex-shrinkプロパティの動作の詳細についてはこちらの記事を参照して下さい。

さらにウィンドウ幅を縮めます。ウィンドウを狭めた場合でも枠の幅の比率はウィンドウ幅の広い時と同じことがわかります。

補足:ウィンドウ幅いっぱいに枠を表示する場合

先の例では、ウィンドウ幅が広い場合には右側に余白ができてしまいます。ウィンドウ幅いっぱいに枠を表示したい場合があります。

ウィンドウの幅をすべて利用して枠を表示する場合は枠のCSSにflex-grow プロパティを設定します。flex-grow プロパティの詳細はこちらの記事を参照してください。
下記のコードでは、一番右側のframeD クラスにflex-grow プロパティが設定されているため、ウィンドウ幅が広い場合は、一番右側の枠の横幅が伸びウィンドウ幅いっぱいに表示されます。

flex-basis.css

.container {
    display: flex;
}

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

.frameB {
    border: 1px solid #ff6a00;
    flex-basis: 128px;
}

.frameC {
    border: 1px solid #d0b106;
    flex-basis: 194px;
}

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

.frameE {
    border: 1px solid #01b9b3;
    flex-basis: 320px;
    flex-grow: 1;
}

flex-basis2.html

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

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。ウィンドウ幅いっぱいに枠が表示されていることがわかります。