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

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ピクセル以下の幅にはならない動作になります。幅がウィンドウ幅より広くなる場合は横方向のスクロールバーが表示されます。