CSS ・ Flexbox・Grid

flex

アイテムの伸縮

フレックスアイテムが、空いたスペースに合わせてどれだけ伸び縮みするかをまとめて指定します。

初期値
0 1 auto
適用対象
フレックスアイテム
継承
しない
01

サンプルコード

HTML
1<div class="flex">
2 <div class="item">固定</div>
3 <div class="item grow">flex: 1（残りを埋める）</div>
4 <div class="item">固定</div>
5</div>
6<div class="flex">
7 <div class="item one">flex: 1</div>
8 <div class="item two">flex: 2</div>
9</div>
CSS
1.flex {
2 display: flex;
3 gap: 6px;
4 margin-bottom: 12px;
5}
6.grow, .one {
7 flex: 1;
8}
9.two {
10 flex: 2;
11}
12.item {
13 padding: 8px 14px;
14 background: #b68235;
15 color: #fff;
16}
02

実行結果

ブラウザでの表示
03

解説

flex は、フレックスアイテム（display: flex の親の直下の子要素）に指定し、伸び縮みの仕方を決めます。

flex: 1 を指定すると、空いているスペースを埋めるように伸びます。複数のアイテムに flex: 1 と flex: 2 を指定すると、余ったスペースを 1:2 の割合で分け合います。

flex は flex-grow（伸びる比率）・flex-shrink（縮む比率）・flex-basis（基本の大きさ）の3つをまとめて書く一括指定です。

flex-grow の grow は「成長」という意味です。親要素の余白を成長の余地と考え、その余地を子要素がどういう割合で使うかを指定します。3つ並んだうち2番目だけに flex-grow: 1 を指定すると、余白をすべて2番目がもらって伸びます。

迷ったら「flex: 1 を指定した要素は、余った幅を割り当てる」と覚えておけば十分です。

04

応用例・注意点

よく使う値

値説明
flex: 1残りのスペースを埋める（1 1 0% と同じ）
flex: auto内容の大きさを基準に伸び縮み
flex: none伸びも縮みもしない
flex: 0 0 200px200px に固定
flex-grow / flex-shrink / flex-basis個別に指定するプロパティ

検索欄を伸ばし、ボタンは固定にする

入力欄に flex: 1 を指定すると、ボタン以外の幅をすべて使います。

HTML
1<form class="search">
2 <input type="search">
3 <button>検索</button>
4</form>
CSS
1.search {
2 display: flex;
3 gap: 8px;
4}
5.search input {
6 flex: 1;
7}

2番目の子要素だけ、余白を埋めるように伸ばす（flex-grow）

1と3は中身の幅のまま、2が「成長の余地」をすべて使って広がります。

HTML
1<div class="flex">
2 <div class="flex__item--01">1</div>
3 <div class="flex__item--02">2</div>
4 <div class="flex__item--03">3</div>
5</div>
CSS
1.flex {
2 display: flex;
3}
4.flex__item--02 {
5 flex-grow: 1;
6}

画像は固定幅、テキストは残りの幅をすべて使う

画像を150pxにしたとき、テキストの幅を「親の幅 − 150px − 間隔」と計算するのは面倒です。テキストに flex: 1 を書けば、残りの幅が自動で割り当てられます。

HTML
1<div class="media">
2 <img class="media__img" src="photo.jpg" alt="">
3 <p class="text">テキストが入ります。これはダミーテキストです。</p>
4</div>
CSS
1.media {
2 display: flex;
3 gap: 16px;
4}
5.media__img {
6 width: 150px;
7}
8.text {
9 flex: 1;
10}

注意点

  1. 01flex は子要素（フレックスアイテム）に書くプロパティです。
  2. 02flex: 1 の要素に長い単語があると縮まないことがあります。その場合は min-width: 0 を指定します。
05

flex-basis と flex-shrink

flex-basis：flex 専用の幅

flex-basis は、flex 専用の width 設定プロパティです。伸び縮みする前の、基本の大きさを決めます。

widthflex-basis
使える要素どの要素にも使えるflex の子要素（フレックスアイテム）にのみ使える
両方書いたとき—flex-basis の値が優先される
向き常に横幅flex アイテムが並ぶ方向（flex-direction）によって横幅か高さの値になる

例1：width と flex-basis を両方書く

width: 100px と flex-basis: 200px を両方書くと、flex-basis の 200px になります。

HTML
1<div class="flex">
2 <div class="item basis">width: 100px<br>flex-basis: 200px</div>
3 <div class="item">width: 100px</div>
4</div>
CSS
1.flex {
2 display: flex;
3 gap: 8px;
4}
5.item {
6 width: 100px;
7 padding: 8px;
8 background: #b68235;
9 color: #fff;
10 font-size: 12px;
11}
12.basis {
13 flex-basis: 200px;
14}
ブラウザでの表示

コードと表示の対応

  1. flex-basis: 200px;左の箱は width: 100px も書いてありますが、flex-basis が優先されて 200px の幅になります。
  2. width: 100px;右の箱は width だけなので、そのまま 100px です。

flex-shrink：縮む割合

shrink は「縮む」という意味で、flex-shrink は 圧縮率 を指定します。子要素の幅の合計が親要素からはみ出す場合に使います。

1、2、3 などの単位なしの数値で指定し、数値が大きいほどよく縮みます。初期値は 1 なので、何も書かなければ子要素は親に収まるように縮みます。flex-shrink: 0 と書くと圧縮率が 0 になり、flex-basis や width で設定した子要素の幅がそのまま確保されます。そのぶん、親要素からはみ出します。

例2：flex-shrink: 0 で縮まないようにする

幅 300px の親に、width: 150px の子を3つ並べます。上は初期値（1）で縮んで収まり、下は flex-shrink: 0 で縮まずはみ出します。

HTML
1<div class="flex">
2 <div class="item">1</div>
3 <div class="item">2</div>
4 <div class="item">3</div>
5</div>
6<div class="flex">
7 <div class="item no-shrink">1</div>
8 <div class="item no-shrink">2</div>
9 <div class="item no-shrink">3</div>
10</div>
CSS
1.flex {
2 display: flex;
3 width: 300px;
4 margin-bottom: 12px;
5 border: 2px dashed #999;
6}
7.item {
8 width: 150px;
9 padding: 8px 0;
10 text-align: center;
11 background: #b68235;
12 color: #fff;
13 border-right: 1px solid #fff;
14}
15.no-shrink {
16 flex-shrink: 0;
17}
ブラウザでの表示

コードと表示の対応

  1. .item { width: 150px; }3つで 450px あり、親の 300px からはみ出す幅です。
  2. （上の段）flex-shrink: 1（初期値）3つとも同じ割合で縮み、親の点線の中に収まります。
  3. .no-shrink { flex-shrink: 0; }下の段は縮まないので、150px ずつのまま親からはみ出します。

まとめて書くなら flex

  • flex: 0 0 200px; は「伸びない・縮まない・基本の幅 200px」という意味です。
  • 順番は flex-grow → flex-shrink → flex-basis です。
06

関連項目

↑↓ 選択Enter 移動Esc 閉じるCtrl K⌘K で開閉