FlexBox でカラムの最小幅を設定する

概要

FlexBoxでカラムの幅の最小値を指定する場合は、min-width プロパティを利用します。

書式

min-width: (幅のサイズ)

幅のサイズにはCSSのサイズ指定を利用できます。単位についてはこちらの記事を参照してください。

例

コード

下記のコードを記述します。

flex-column-min-width.css

.container {
    display: flex;
}

.frameLeft {
    border: 1px solid #e9006b;
    background-color:#fddceb;
    min-width:160px;
    flex: 1;
}

.frameCenter {
    border: 1px solid #0158c2;
    background-color: #ccdff6;
    min-width: 320px;
    flex: 3;
}

.frameRight {
    border: 1px solid #d44100;
    background-color: #ffe4af;
    min-width: 160px;
    flex: 1;
}

flex-column-min-width.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="flex-column-min-width.css" />

</head>
<body>
  <div class="container">
    <div class="frameLeft">左側のコンテンツ<br />あいうえお<br />かきくけこ</div>
    <div class="frameCenter">中央のコンテンツ<br />αβγ<br /></div>
    <div class="frameRight">右側のコンテンツ<br />ABCDE<br />FGHIJK</div>
  </div>
</body>
</html>

解説

frameLeft, frameRight クラスにmin-width:160px を指定しているため、左と右のカラムはウィンドウ幅を縮めても、160ピクセル以下の幅にはならない動作となります。また、frameCenter クラスに min-width:320px を指定しているため、ウィンドウ幅を狭めた場合でも320ピクセル以下の幅にはならない動作になります。幅がウィンドウ幅より広くなる場合は横方向のスクロールバーが表示されます。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。左右のカラムの幅と中央のカラムの幅が1:3になっています。
FlexBox でカラムの最小幅を設定する:画像1

Webブラウザのウィンドウ幅を狭めます。3つのカラムの幅の比率が変わらずに、それぞれの枠の幅が縮まります。
FlexBox でカラムの最小幅を設定する:画像2

さらにウィンドウ幅を狭めると、枠の幅は狭まりますが、左右の枠は160ピクセルよりも幅は狭まりません。
FlexBox でカラムの最小幅を設定する:画像3

中央の枠の幅のみが狭まります。
FlexBox でカラムの最小幅を設定する:画像4

中央の枠も320ピクセルよりは狭めない設定となっているため、ウィンドウ幅が640ピクセル(左枠160px + 中央枠320px + 右枠160px)以下になると横方向のスクロールバーが表示されます。
FlexBox でカラムの最小幅を設定する:画像5
FlexBox でカラムの最小幅を設定する:画像6