Flexboxで枠の幅をコンテンツの幅に合わせたサイズにする - CSS

Flexboxで枠の幅をコンテンツの幅に合わせたサイズにするコードを紹介します。

概要

Flexboxで枠の幅をコンテンツの幅に合わせたサイズにする場合には、flex:0; を指定します。

書式

flex:0;

実装例

コード

以下のHTML、CSSファイルを作成します。

flex-0.css

.container {
  display: flex;
  border: 1px solid #ff6a00;
}

.frame1{
  flex:1;
  border: 1px solid #00b117;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.frame2 {
  flex: 2;
  border: 1px solid #009c9c;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.frame3 {
  flex: 0;
  border: 1px solid #7cae00;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

flex-0.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="flex-0.css" />
</head>
<body>
  <div class="container">
    <div class="frame1">
      <p>枠1です</p>
      <p>
        ABCDE<br />
        12345<br />
      </p>
    </div>
    <div class="frame2">
      <p>枠2です</p>
      <p>
        ABCDE<br />
        12345<br />
      </p>
    </div>
    <div class="frame3">
      <p>枠3です</p>
      <p>
        ABCDE<br />
        12345<br />
      </p>
    </div>
  </div>
</body>
</html>

解説

frame1, frame2 クラスは flex プロパティの値が設定されているため、frame1の幅とframe2の幅が1:2となる比率で設定されます。

.frame1{
  flex:1;
  border: 1px solid #00b117;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.frame2 {
  flex: 2;
  border: 1px solid #009c9c;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

frame3 は flexプロパティの値が0の設定のため、枠の幅にはコンテンツに合わせた幅(ワードラップありの最小の幅)になります。
.frame3 {

flex: 0;
border: 1px solid #7cae00;
margin: 0.5rem 0.5rem 0.5rem 0.5rem;

}