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

FlexBox でカラムの最大幅を設定するコードを紹介します。

概要

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

書式

max-width: (幅のサイズ)

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

例

コード

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

flex-column-max-width.css

.container {
    display: flex;
}

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

.frameCenter {
    border: 1px solid #0158c2;
    background-color: #ccdff6;
    flex: 2;
}

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

flex-column-max-width.html

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