flexショートハンドプロパティとは？flex-grow・flex-shrink・flex-basisをわかりやすく解説

CSSの flex は、Flexboxレイアウトで子要素の伸び方、縮み方、基準サイズをまとめて指定するショートハンドプロパティです。結論から言うと、flex は flex-grow、flex-shrink、flex-basis の3つをまとめて指定します。

たとえば、flex: 1;、flex: 1 1 auto;、flex: 0 0 300px;、flex: none; は、すべてFlexアイテムのサイズ調整に関係する指定です。短く書けるため便利ですが、裏側で何を指定しているのかを理解しないまま使うと、要素が思った幅にならない、縮まない、はみ出す、均等になりすぎるといった問題が起こりやすくなります。

1. flexショートハンドプロパティとは

flex ショートハンドプロパティとは、Flexboxの子要素であるFlexアイテムに対して、伸び方、縮み方、基準サイズをまとめて指定するCSSプロパティです。親要素に display: flex; を指定すると、その直下の子要素がFlexアイテムになり、その子要素に flex を指定してサイズの振る舞いを決めます。

flex は単なる幅指定ではありません。width のように固定的な横幅を決めるのではなく、親要素の中に余白がある場合は伸び、幅が足りない場合は縮み、さらにその計算の出発点となる基準サイズも同時に指定します。そのため、Flexboxを使った2カラム、カード横並び、ヘッダー、サイドバー、ナビゲーションでは非常によく使われます。

1.1 flexは3つの指定をまとめる

flex は、flex-grow、flex-shrink、flex-basis の3つをまとめる省略記法です。たとえば flex: 1 1 auto; と書くと、伸びる割合、縮む割合、基準サイズを1行で指定できます。

この3つを個別に書くこともできますが、実務では flex ショートハンドでまとめて書くことが多いです。関連する値を1つにまとめられるため、レイアウトの意図を読み取りやすくなります。

1.2 flex-growは伸びる割合

flex-grow は、Flexコンテナ内に余ったスペースがあるとき、Flexアイテムがどれだけ伸びるかを決めます。値が大きいほど、余ったスペースを多く受け取ります。

たとえば、2つの要素に flex-grow: 1 と flex-grow: 2 を指定した場合、余ったスペースは1対2の割合で分配されます。これは「幅そのもの」ではなく、「余ったスペースを受け取る比率」です。

1.3 flex-shrinkは縮む割合

flex-shrink は、Flexコンテナ内の幅が足りないとき、Flexアイテムがどれだけ縮むかを決めます。通常は 1 が使われ、要素は必要に応じて縮みます。

一方、flex-shrink: 0; を指定すると、その要素は縮みにくくなります。サイドバー、ロゴ、固定ボタンなど、幅を保ちたい要素に使うことがあります。

1.4 flex-basisは基準サイズ

flex-basis は、Flexアイテムが伸びたり縮んだりする前の基準サイズです。横並びのFlexboxでは幅のように働き、縦方向のFlexboxでは高さのように働きます。

flex-basis: auto; なら内容や width を基準にし、flex-basis: 0; なら基準サイズを0に近い形で計算します。flex-basis: 300px; のように固定値を指定すれば、300pxを出発点として伸縮が行われます。

1.5 flexは子要素に書く

flex は親要素ではなく、Flexアイテムである子要素に指定します。親要素には display: flex; を指定し、子要素に flex: 1; や flex: 0 0 300px; を指定します。

この関係を理解していないと、flex を書いたのに効かないという問題が起こります。Flexboxでは、親が配置の場を作り、子がその中でどのように伸縮するかを決めると考えると分かりやすいです。

1.6 基本コード

以下は、親要素をFlexコンテナにし、メイン領域とサイドバーに flex を指定する基本例です。メイン領域は残り幅を使い、サイドバーは300pxの固定幅に近い形で配置されます。

ファイル名: style.css｜言語: CSS｜用途: flexショートハンドの基本構造を確認する

.layout {
  display: flex;
  gap: 24px;
}

.main {
  flex: 1 1 auto;
}

.sidebar {
  flex: 0 0 300px;
}

2. flexに含まれる3つのプロパティ

flex に含まれるプロパティは、flex-grow、flex-shrink、flex-basis の3つです。この3つはそれぞれ独立した役割を持っていますが、Flexboxのサイズ計算では互いに関係しながら働きます。

flex を理解するには、「伸びる」「縮む」「基準サイズ」という3つの考え方をセットで覚えることが大切です。どれか1つだけを見ても、Flexアイテムの最終的なサイズは正しく理解しにくいです。

2.1 flex-growの役割

flex-grow は、親要素の中に余白があるときに、その余白をどの割合で受け取るかを決めます。値が 0 なら伸びず、1 以上なら余白を受け取ります。

たとえば、メインカラムに flex-grow: 1; を指定すると、サイドバー以外の残りスペースを使って広がることができます。2カラムレイアウトでは非常によく使われます。

2.2 flex-shrinkの役割

flex-shrink は、親要素の幅が足りないときに、どれだけ縮むかを決めます。値が 1 なら通常どおり縮み、0 なら縮まないようにできます。

固定幅のサイドバーやロゴには flex-shrink: 0; を指定することがあります。ただし、縮まない要素が多すぎると横スクロールの原因になるため、使いすぎには注意が必要です。

2.3 flex-basisの役割

flex-basis は、伸縮計算の出発点となるサイズです。auto、0、300px、50% などを指定できます。

flex-basis が auto なら内容やwidthが考慮され、0 なら内容サイズよりも余白分配の比率が強く反映されます。300px のように指定すれば、固定カラムのような設計がしやすくなります。

2.4 3つの順番

flex の一般的な順番は、flex: <flex-grow> <flex-shrink> <flex-basis>; です。たとえば、flex: 1 1 auto; は、growが1、shrinkが1、basisがautoという意味です。

flex: 0 0 300px; なら、伸びない、縮まない、基準サイズは300pxという意味になります。3つの値を順番で覚えると、ショートハンドを読みやすくなります。

2.5 個別指定との違い

flex はショートハンドなので、個別プロパティをまとめて指定します。個別指定なら flex-grow、flex-shrink、flex-basis を別々に書きます。

学習段階では個別に書くと理解しやすいですが、実務ではショートハンドの方が簡潔です。特にレイアウト部品では、3つをまとめて書いた方が意図が伝わりやすくなります。

2.6 分解コード

以下は、flex: 1 1 auto; を個別プロパティに分解した例です。同じ意味を別の書き方で表すことで、flex の中身を理解しやすくなります。

ファイル名: style.css｜言語: CSS｜用途: flexショートハンドを個別プロパティに分解する

/* ショートハンド */
.item {
  flex: 1 1 auto;
}

/* 個別指定 */
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

3. flex-growとは

flex-grow は、Flexコンテナ内に余ったスペースがあるとき、Flexアイテムがどれだけ伸びるかを決めるプロパティです。値は数値で指定し、0 なら伸びず、1 以上なら余ったスペースを受け取ります。

重要なのは、flex-grow が「最終的な幅そのもの」を指定するわけではないということです。あくまで余ったスペースをどの割合で受け取るかを決めるため、親要素の幅、他の子要素のサイズ、gap、flex-basisなどによって最終的な幅が変わります。

3.1 余白を受け取る力

flex-grow は、親要素の中に余白がある場合に働きます。余白がなければ、flex-grow を指定しても伸びるスペースがないため、見た目が大きく変わらないこともあります。

たとえば、横幅1000pxの親要素の中に、合計700px分の子要素がある場合、残り300pxをどの子要素がどれだけ受け取るかを flex-grow が決めます。

3.2 0なら伸びない

flex-grow: 0; を指定すると、余ったスペースがあってもその要素は伸びません。内容サイズや指定した基準サイズを保ちたい場合に使います。

サイドバー、固定ボタン、ロゴなどは、勝手に伸びると不自然になることがあります。そのような要素には flex-grow: 0; を指定すると安定します。

3.3 1なら伸びる

flex-grow: 1; を指定すると、その要素は余ったスペースを受け取って伸びます。複数の要素が同じ flex-grow: 1; を持っている場合、余白は均等に分けられます。

flex: 1; がよく使われるのは、この伸びる挙動が便利だからです。カードやカラムを同じ幅にしたい場合に簡単に使えます。

3.4 数値は比率

flex-grow の数値は比率として使われます。たとえば、Aに 1、Bに 2 を指定すると、余ったスペースはAとBに1対2の割合で分配されます。

ただし、もともとの基準サイズが異なる場合、最終的な幅が単純に1対2になるとは限りません。flex-basis や内容サイズも計算に関係するためです。

3.5 growだけでは完成しない

flex-grow だけを見ても、Flexアイテムの最終幅は分かりません。flex-shrink、flex-basis、親要素の幅、gap、内容サイズが組み合わさって最終サイズが決まります。

そのため、実務では flex-grow だけを個別指定するより、flex: 1 1 auto; や flex: 1 1 0; のようにショートハンドでまとめる方が意図が明確になります。

3.6 flex-growのコード例

以下は、2つの要素が1対2の割合で余ったスペースを受け取る例です。.item-large の方が大きく広がります。

ファイル名: style.css｜言語: CSS｜用途: flex-growで余白の分配比率を変える

.row {
  display: flex;
  gap: 16px;
}

.item-small {
  flex: 1 1 0;
}

.item-large {
  flex: 2 1 0;
}

4. flex-shrinkとは

flex-shrink は、Flexコンテナの幅が足りないとき、Flexアイテムがどれだけ縮むかを決めるプロパティです。通常、Flexアイテムは必要に応じて縮むため、初期的な感覚としては flex-shrink: 1; がよく使われます。

レスポンシブデザインでは、画面幅が狭くなったときに要素が適切に縮むことが重要です。一方で、縮んでは困るロゴやサイドバー、固定ボタンなどもあります。そのため、縮んでよい要素と縮ませたくない要素を分けることが大切です。

4.1 足りない幅を吸収する

Flexアイテムの合計幅が親要素を超える場合、ブラウザはアイテムを縮めて収めようとします。このときに働くのが flex-shrink です。

flex-shrink があることで、画面幅が狭くなっても横スクロールを避けやすくなります。ただし、長いテキストや固定幅要素がある場合は、別の調整も必要です。

4.2 0なら縮まない

flex-shrink: 0; を指定すると、その要素は縮まないようになります。固定幅のサイドバーや、ロゴのように潰れてほしくない要素に使います。

ただし、縮まない要素が多すぎると、親要素からはみ出します。そのため、flex-shrink: 0; は必要な要素にだけ使うのが基本です。

4.3 1なら通常どおり縮む

flex-shrink: 1; は、幅が足りないときに通常どおり縮む指定です。柔軟にレイアウトを保ちたいメインカラムやナビゲーション領域に向いています。

メインコンテンツは、縮んでよい一方で、長い文字列によって縮めなくなることがあります。その場合は min-width: 0; を併用します。

4.4 shrinkも比率で働く

flex-shrink も数値の比率として働きます。値が大きい要素ほど、幅が足りないときにより多く縮む可能性があります。

ただし、縮み方は flex-basis や内容サイズにも影響されます。単純に「2なら2倍縮む」と考えるより、縮小時の重みづけと考える方が正確です。

4.5 min-widthとの関係

Flexboxで要素が思ったように縮まない場合、min-width が関係していることがあります。特に長いURL、コード、英単語、画像などがあると、要素が内容に引っ張られて縮めなくなります。

そのような場合、メインカラムに min-width: 0; を指定すると、Flexbox内で適切に縮むようになります。2カラムレイアウトでは非常に重要な指定です。

4.6 flex-shrinkのコード例

以下は、メインカラムは縮めるが、サイドバーは縮ませない例です。サイドバーを安定した幅に保ちながら、メイン領域を柔軟に調整できます。

ファイル名: style.css｜言語: CSS｜用途: flex-shrinkでサイドバーを縮ませない

.layout {
  display: flex;
  gap: 24px;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar {
  flex: 0 0 300px;
}

5. flex-basisとは

flex-basis は、Flexアイテムが伸びたり縮んだりする前の基準サイズを指定するプロパティです。横並びのFlexboxでは幅のように働き、縦方向のFlexboxでは高さのように働きます。

flex-basis を理解すると、flex: 1;、flex: 1 1 auto;、flex: 0 0 300px; の違いが分かりやすくなります。Flexboxのサイズ計算では、この基準サイズを出発点にして、余白の分配や縮小が行われます。

5.1 伸縮前の出発点

flex-basis は、Flexアイテムの最初のサイズを決めるような役割を持ちます。たとえば flex-basis: 300px; なら、まず300pxを基準として考えます。

その後、flex-grow によって伸びたり、flex-shrink によって縮んだりします。つまり、flex-basis は最終サイズそのものではなく、計算の出発点です。

5.2 autoの意味

flex-basis: auto; は、内容サイズや width を基準にします。要素の自然なサイズをある程度尊重したい場合に使いやすいです。

flex: 1 1 auto; は、内容を基準にしながら伸び縮みするため、メインコンテンツのような可変領域でよく使われます。

5.3 0の意味

flex-basis: 0; は、基準サイズを0として扱います。そのため、内容の自然な幅よりも、flex-grow の比率による分配が強く反映されます。

flex: 1; が均等幅になりやすいのは、このbasisが0に近い形で解釈されるためです。内容量に関係なく均等なカラムを作りたい場合に便利です。

5.4 固定値の意味

flex-basis: 300px; のように固定値を指定すると、その値を基準にしてFlexアイテムが配置されます。サイドバーや固定カラムに向いています。

flex: 0 0 300px; と書けば、伸びず、縮まず、300pxを基準にするという意味になります。固定幅の2カラムを作るときによく使います。

5.5 widthとの違い

flex-basis は width と似ていますが、Flexboxの主軸方向サイズとして働く点が違います。flex-direction: row; なら幅のように、flex-direction: column; なら高さのように働きます。

Flexbox内でサイズを指定する場合は、単純な width よりも flex-basis を使った方が、伸縮の意図が伝わりやすいことがあります。

5.6 flex-basisのコード例

以下は、サイドバーの基準サイズを300pxにする例です。個別指定とショートハンドの両方を示しています。

ファイル名: style.css｜言語: CSS｜用途: flex-basisでサイドバーの基準幅を指定する

.sidebar {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 300px;
}

/* 同じ意味をショートハンドで書く */
.sidebar {
  flex: 0 0 300px;
}

6. flexの基本構文

flex の基本構文は、flex: <flex-grow> <flex-shrink> <flex-basis>; です。最も分かりやすいのは、3つの値をすべて書く方法です。

たとえば、flex: 1 1 auto; は、伸びる、縮む、基準サイズはautoという意味です。flex: 0 0 300px; は、伸びない、縮まない、基準サイズは300pxという意味です。

6.1 3値で書く

3値で書くと、grow、shrink、basisが明確になります。読み手が意図を理解しやすいため、チーム開発や重要なレイアウトではおすすめです。

たとえば、flex: 1 1 auto; と書けば、柔軟に伸び縮みするメイン領域だと分かります。flex: 0 0 300px; と書けば、固定幅に近いサイドバーだと分かります。

6.2 2値で書く

flex は2値でも書けます。数値と長さを組み合わせる場合、数値は flex-grow、長さは flex-basis として解釈されることがあります。

ただし、2値指定は読み手が迷う場合があります。実務では、省略による誤解を避けたい場合、3値で書く方が安全です。

6.3 1値で書く

flex: 1; のように1値だけでも指定できます。これは非常によく使われる書き方です。

ただし、flex: 1; は単に flex-grow: 1; だけを意味するわけではありません。basisも補完されるため、均等幅になりやすい挙動になります。

6.4 キーワードで書く

flex には、auto、none、initial などのキーワードも使えます。これらはよく使う組み合わせを短く表すための指定です。

flex: auto; は内容を基準にしながら伸縮する指定、flex: none; は伸びず縮まない指定としてよく使われます。

6.5 代表的な構文表

6.6 基本構文のコード例

以下は、代表的な flex の書き方をまとめた例です。用途ごとに使い分けると、Flexboxのレイアウトが安定します。

ファイル名: style.css｜言語: CSS｜用途: flexショートハンドの代表的な構文を確認する

.equal-item {
  flex: 1;
}

.content-item {
  flex: 1 1 auto;
}

.fixed-sidebar {
  flex: 0 0 300px;
}

.fixed-button {
  flex: none;
}

7. flex: 1 の意味

flex: 1; は、Flexboxで最もよく使われるショートハンドの1つです。複数の要素を均等幅にしたいとき、または残りの幅を使わせたいときによく使います。

ただし、flex: 1; は単純に「伸びる」という意味だけではありません。多くの場合、flex-grow: 1;、flex-shrink: 1;、flex-basis: 0% に近い挙動になります。そのため、内容サイズよりも均等な分配が優先されやすいです。

7.1 均等幅になりやすい

複数の要素に flex: 1; を指定すると、それぞれが同じ割合でスペースを受け取ります。その結果、同じ幅のカラムやカードを作りやすくなります。

3つのカードを横並びにして同じ幅にしたい場合、flex: 1; は非常に便利です。gap と組み合わせると簡単に均等レイアウトを作れます。

7.2 内容幅を強く考慮しない

flex: 1; は、内容の自然な幅を強く考慮しないため、短い内容の要素も長い内容の要素も同じ幅になりやすいです。

これは均等幅には便利ですが、内容に応じた自然な幅を保ちたい場合には不向きです。その場合は flex: 1 1 auto; を検討します。

7.3 メインカラムに使える

2カラムレイアウトでは、メインカラムに flex: 1; を指定することがあります。サイドバーを固定幅にし、メインが残りの幅を使う構成です。

ただし、本文が長い場合やコードブロックがある場合は、min-width: 0; を一緒に指定すると安全です。Flexbox内のはみ出しを防ぎやすくなります。

7.4 カードにも使える

横並びカードに flex: 1; を指定すると、カードを均等幅にできます。カード数が固定されている場合は非常に使いやすいです。

ただし、カードが折り返す場合や、列数を画面幅に応じて細かく変えたい場合は、CSS Gridの方が向いていることもあります。

7.5 誤解しやすい点

flex: 1; は「width: 100%」ではありません。また、「flex-growだけを1にする指定」でもありません。

実際には、shrinkやbasisも補完されます。そのため、flex: 1 1 auto; とは挙動が異なる場合があります。均等にしたいなら flex: 1;、内容を考慮したいなら flex: 1 1 auto; と覚えると分かりやすいです。

7.6 flex: 1 のコード例

以下は、3つのカラムを均等幅にする例です。各カラムに flex: 1; を指定しています。

ファイル名: style.css｜言語: CSS｜用途: flex:1で均等幅カラムを作る

.columns {
  display: flex;
  gap: 24px;
}

.column {
  flex: 1;
  min-width: 0;
}

8. flex: auto と flex: none の違い

flex: auto; と flex: none; は、Flexboxでよく使われるキーワード指定です。短く書けるため便利ですが、意味は大きく違います。

flex: auto; は内容サイズを基準にしながら伸び縮みする指定です。一方、flex: none; は伸びず縮まない固定的な指定です。この違いを理解すると、ヘッダー、ナビゲーション、ボタン、ロゴ、メイン領域の設計がしやすくなります。

8.1 flex: auto の意味

flex: auto; は、内容やwidthを基準にしながら、余れば伸び、足りなければ縮む指定です。可変領域に向いています。

メイン領域やナビゲーション領域など、周囲に合わせて柔軟に広がってほしい要素で使いやすいです。

8.2 flex: none の意味

flex: none; は、伸びず、縮まず、内容サイズや指定幅を保つ指定です。固定的な要素に向いています。

ロゴ、アイコン、固定ボタンなど、サイズが変わると見た目が崩れる要素で使います。ただし、狭い画面でははみ出しに注意が必要です。

8.3 autoは柔軟

flex: auto; は、内容サイズをある程度尊重しながら柔軟に伸縮します。均等幅にしたいというより、自然な幅を保ちながら調整したいときに使います。

たとえば、ヘッダー内のナビゲーション領域を残り幅に合わせて広げたい場合に便利です。

8.4 noneは固定的

flex: none; は、要素を固定的に扱いたいときに使います。ロゴやCTAボタンなど、サイズを保ちたい要素に向いています。

ただし、固定的な要素が多すぎると、狭い画面で横スクロールが出ます。必要な要素だけに使うことが大切です。

8.5 使い分け表

8.6 autoとnoneのコード例

以下は、ロゴを固定し、ナビゲーション領域を柔軟に伸縮させる例です。

ファイル名: style.css｜言語: CSS｜用途: flex:autoとflex:noneを使い分ける

.header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo {
  flex: none;
}

.nav {
  flex: auto;
  min-width: 0;
}

9. flex: 0 0 auto と flex: 0 0 300px

flex: 0 0 auto; と flex: 0 0 300px; は、どちらも固定的な要素を作るときによく使う指定です。growが0、shrinkが0なので、伸びず縮まない方向の指定になります。

違いは、basisが auto か 300px かです。auto は内容やwidthを基準にし、300px は明確に300pxを基準にします。

9.1 0 0 autoの意味

flex: 0 0 auto; は、伸びず、縮まず、基準サイズはautoという指定です。内容サイズやwidthをもとにサイズが決まります。

ロゴ、ボタン、アイコンなど、内容サイズを自然に保ちたい要素に向いています。

9.2 0 0 300pxの意味

flex: 0 0 300px; は、伸びず、縮まず、基準サイズを300pxにする指定です。固定幅サイドバーで非常によく使います。

この指定は、Flexbox内で「この要素は300pxの固定カラムにしたい」という意図が明確です。

9.3 autoと固定値の違い

auto は内容やwidthを参照し、固定値は指定したサイズを基準にします。内容に応じて自然な幅にしたいなら auto、明確な幅を持たせたいなら 300px のような固定値を使います。

サイドバーでは固定値が使いやすく、ロゴやボタンではautoが自然な場合が多いです。

9.4 サイドバーでの使い方

サイドバーには flex: 0 0 280px; や flex: 0 0 300px; がよく使われます。メインカラムは残り幅を使い、サイドバーは一定幅を保ちます。

ただし、スマホでは横並びにすると狭くなるため、PC以上のメディアクエリ内で指定するのが安全です。

9.5 固定幅の注意点

固定幅は便利ですが、画面幅が狭い場合にはみ出しの原因になります。固定幅を使うときは、どの画面幅から適用するかを考える必要があります。

スマホでは1カラム、PCでは固定サイドバーという設計にすると、レスポンシブ対応しやすくなります。

9.6 固定幅コード例

以下は、1024px以上でサイドバーを300px固定に近い形で表示する例です。

ファイル名: style.css｜言語: CSS｜用途: flex:0 0 300pxで固定幅サイドバーを作る

.page {
  display: block;
}

@media (min-width: 1024px) {
  .page {
    display: flex;
    gap: 32px;
  }

  .main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sidebar {
    flex: 0 0 300px;
  }
}

10. flex-basisとwidthの使い分け

Flexbox内では、width よりも flex-basis を使った方が意図が明確になることがあります。width は通常の幅指定ですが、flex-basis はFlexboxの主軸方向における基準サイズです。

横並びのFlexboxでは flex-basis が幅のように見えますが、Flexboxの伸縮計算に直接関係する点が特徴です。サイドバーや固定カラムでは、width より flex: 0 0 300px; の方が分かりやすいことがあります。

10.1 widthは通常の幅

width は、通常の横幅を指定するプロパティです。Flexbox以外でも使えるため、一般的な幅指定として理解しやすいです。

ただし、Flexbox内では width を指定しても、growやshrinkの影響で最終幅が変わる場合があります。

10.2 flex-basisは主軸基準

flex-basis はFlexboxの主軸方向の基準サイズです。横方向なら幅、縦方向なら高さのように働きます。

そのため、Flexbox内のサイズ指定では、flex-basis の方がレイアウトの意図に合いやすい場合があります。

10.3 サイドバーはbasisが分かりやすい

サイドバーのような固定カラムでは、width: 300px; より flex: 0 0 300px; の方が意図が明確です。伸びない、縮まない、300px基準だと一目で分かります。

チームでCSSを書く場合も、ショートハンドの3値指定は意図を共有しやすいです。

10.4 contentによる違い

flex-basis: auto; は内容やwidthを参照します。内容サイズを基準にしたい場合に便利です。

一方、flex-basis: 0; は内容を基準にしないため、均等幅レイアウトに向いています。flex: 1; が均等になりやすいのはこのためです。

10.5 実務での選び方

固定カラムなら flex: 0 0 300px;、可変メインなら flex: 1 1 auto;、均等カラムなら flex: 1; が使いやすいです。

幅を指定したいからといって常に width を使うのではなく、Flexbox内では flex-basis を含む flex ショートハンドを検討します。

10.6 width比較コード

以下は、flex-basis を使った指定と、width を使った指定の比較です。

ファイル名: style.css｜言語: CSS｜用途: widthではなくflex-basisで固定カラムを指定する

.sidebar {
  flex: 0 0 300px;
}

.sidebar-alt {
  width: 300px;
  flex-shrink: 0;
}

11. よく使うflexショートハンド一覧

実務でよく使う flex ショートハンドは、ある程度パターン化できます。特に、flex: 1;、flex: 1 1 auto;、flex: 0 0 300px;、flex: none; はよく使います。

これらの意味を覚えておくと、Flexboxのコードを読んだときに迷いにくくなります。短い指定でも、裏側ではgrow、shrink、basisが働いています。

11.1 flex: 1

flex: 1; は、均等幅のカラムや、残り幅を使う要素に使います。複数のアイテムに指定すると、同じ比率で広がりやすくなります。

カードやカラムを同じ幅にしたいときに便利です。ただし、内容の自然な幅はあまり考慮されません。

11.2 flex: 1 1 auto

flex: 1 1 auto; は、内容を基準にしながら伸び縮みする指定です。メインコンテンツのように、自然な幅を考慮しつつ柔軟にしたい要素に向いています。

flex: 1; よりも内容サイズを尊重しやすいため、文章や可変領域に使いやすいです。

11.3 flex: 0 0 auto

flex: 0 0 auto; は、内容サイズを保ちたい要素に使います。ロゴやボタンなど、伸び縮みしてほしくない要素に向いています。

ただし、狭い画面でははみ出す可能性があるため、レスポンシブ対応では注意が必要です。

11.4 flex: 0 0 300px

flex: 0 0 300px; は、固定幅サイドバーでよく使います。300pxを基準にし、伸びず縮まないため、安定したカラムを作れます。

PC以上で2カラムを作るときの定番指定です。スマホでは1カラムに戻すと安全です。

11.5 flex: none

flex: none; は、伸びず縮まない指定として使えます。flex: 0 0 auto; に近い感覚で、固定的な要素に使います。

短く書けるため便利ですが、チーム開発では意味を共有しておくとよいです。

11.6 一覧表

12. 実務での使い分け

flex ショートハンドは、要素の役割によって使い分けることが大切です。メインカラム、サイドバー、カード、ロゴ、ナビゲーション、ボタンでは、それぞれ必要な伸縮の挙動が異なります。

何となく flex: 1; を使うのではなく、「この要素は伸びてよいか」「縮んでよいか」「基準サイズは何か」を考えると、適切な指定を選びやすくなります。

12.1 メインカラム

メインカラムには、flex: 1 1 auto; または flex: 1; を使うことが多いです。残り幅を使って広がるため、2カラムレイアウトの主役になります。

記事本文や長いテキストを含む場合は、min-width: 0; を併用するとレイアウト崩れを防ぎやすくなります。

12.2 サイドバー

サイドバーには、flex: 0 0 300px; のような指定が向いています。固定幅に近いカラムとして扱えるため、関連記事やプロフィールを安定して表示できます。

ただし、スマホでは横並びにせず、本文の下に回す設計が基本です。PC以上でのみ2カラムにします。

12.3 カード

カードを均等幅にしたい場合は、flex: 1; が使いやすいです。横並びのカードを同じ幅にできます。

ただし、カード数が変わる場合や折り返しが必要な場合は、CSS Gridを使った方が扱いやすい場合もあります。

12.4 ボタン

ボタンは通常、flex: none; や flex: 0 0 auto; が向いています。ボタンが勝手に広がったり縮みすぎたりすると、見た目や操作性が悪くなることがあります。

スマホでボタンを幅いっぱいにしたい場合は、width: 100%; を使う方が分かりやすい場合もあります。

12.5 ナビゲーション

ナビゲーションでは、ロゴを flex: none;、メニュー部分を flex: 1 1 auto; にすることがあります。ロゴを固定し、メニュー領域を柔軟に広げる構成です。

ヘッダー内に検索欄やCTAボタンがある場合は、それぞれが伸びてよいか、縮んでよいかを整理して指定します。

12.6 実務コード

以下は、ヘッダーと2カラムレイアウトで flex を使い分ける例です。

ファイル名: style.css｜言語: CSS｜用途: ヘッダーと2カラムでflexを使い分ける

.header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo {
  flex: none;
}

.nav {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 1024px) {
  .page {
    display: flex;
    gap: 32px;
  }

  .main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sidebar {
    flex: 0 0 300px;
  }
}

13. flexショートハンドの失敗例

flex ショートハンドでよくある失敗は、flex: 1; を万能指定のように使ってしまうことです。flex: 1; は便利ですが、すべての要素に向いているわけではありません。

もうひとつの失敗は、固定したい要素を縮ませてしまうことです。サイドバーやロゴが縮む、逆に固定要素が多すぎて横スクロールが出る、といった問題が起こります。

13.1 flex: 1を何でも使う

flex: 1; は均等幅に便利ですが、内容に応じた自然な幅を作りたい場合には向いていません。短いラベルと長い本文が同じ幅になると不自然です。

要素の内容サイズを尊重したい場合は、flex: 1 1 auto; や flex: none; を検討します。

13.2 サイドバーが縮む

サイドバーに flex: 1; を指定すると、画面幅によって幅が変わりすぎることがあります。補足情報を安定して表示したい場合には向いていません。

サイドバーには flex: 0 0 300px; のような指定が分かりやすいです。

13.3 min-widthを忘れる

Flexboxでは、メインカラムが長いテキストやコードに引っ張られて縮まないことがあります。その結果、横スクロールやレイアウト崩れが起きます。

flex: 1; や flex: 1 1 auto; を指定するメインカラムには、min-width: 0; を入れると安定しやすくなります。

13.4 basisを理解しない

flex-basis を理解しないまま flex を使うと、なぜ均等幅になるのか、なぜ内容幅が無視されるのかが分かりにくくなります。

flex: 1; と flex: 1 1 auto; の違いは、主にbasisの扱いにあります。均等にしたいのか、内容を考慮したいのかで使い分けます。

13.5 固定要素を増やしすぎる

flex: none; や flex: 0 0 300px; のような固定的な指定を増やしすぎると、狭い画面で親要素からはみ出します。

固定幅はPC以上だけで使い、スマホでは縦並びにするなど、レスポンシブ設計とセットで使う必要があります。

13.6 失敗回避コード

以下は、よくある2カラム崩れを防ぐための基本指定です。

ファイル名: style.css｜言語: CSS｜用途: flexの失敗を避ける基本指定

.layout {
  display: flex;
  gap: 24px;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar {
  flex: 0 0 300px;
}

14. flexとレスポンシブ設計

flex ショートハンドは、レスポンシブデザインで非常に役立ちます。スマホでは縦並び、タブレット以上では横並び、PCでは2カラムというように、画面幅に応じて配置を変えられます。

ただし、Flexboxは1方向のレイアウトに強い仕組みです。カード一覧のように縦横両方を細かく管理したい場合は、CSS Gridの方が向いていることもあります。FlexboxとGridを用途に応じて使い分けると、より安定したレイアウトになります。

14.1 スマホでは縦並び

スマホでは、基本的に1カラムが読みやすいです。Flexboxを使う場合でも、flex-direction: column; にするか、通常のブロック表示にします。

横並びを無理に使うと、テキストやボタンが窮屈になります。スマホでは読みやすさを優先します。

14.2 タブレットで横並び開始

768px以上では、画像とテキストを横並びにしたり、カードを横に並べたりできます。flex を使うと、各アイテムの幅を柔軟に調整できます。

ただし、本文とサイドバーの2カラムは1024px以上まで待つ方が安全なことがあります。タブレットでは軽い横並びに留める設計も多いです。

14.3 PCで2カラム

1024px以上では、display: flex; と flex ショートハンドを組み合わせて2カラムを作りやすくなります。メインに flex: 1 1 auto;、サイドバーに flex: 0 0 300px; を指定します。

この構成は、SEO記事、ブログ、管理画面、ドキュメントサイトでよく使われます。

14.4 gapと組み合わせる

Flexboxでは、カラム間の余白に gap を使うと便利です。片方の要素に margin-right を付けるよりも、親要素で余白を管理できます。

gap を使うと、横並びでも縦並びでも余白管理がしやすくなります。

14.5 メディアクエリと使う

flex は、メディアクエリと一緒に使うことでレスポンシブ対応できます。通常CSSでは1カラム、1024px以上でFlexboxの横並びにする設計が分かりやすいです。

新規制作では、スマホを通常CSSにし、広い画面だけ min-width で追加するモバイルファースト設計が扱いやすいです。

14.6 レスポンシブコード

以下は、スマホでは1カラム、PC以上で2カラムにする例です。

ファイル名: style.css｜言語: CSS｜用途: flexショートハンドでレスポンシブ2カラムを作る

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px;
}

.sidebar {
  margin-top: 32px;
}

@media (min-width: 1024px) {
  .page {
    display: flex;
    gap: 32px;
  }

  .main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sidebar {
    flex: 0 0 300px;
    margin-top: 0;
  }
}

15. 実務でおすすめの覚え方

flex ショートハンドは、最初に3つの構成要素を覚えるのが一番大切です。つまり、伸びる割合が flex-grow、縮む割合が flex-shrink、基準サイズが flex-basis です。

この3つを理解すれば、flex: 1;、flex: 1 1 auto;、flex: 0 0 300px; の意味が自然に分かります。実務では、すべての構文を暗記するより、代表的なパターンを覚える方が使いやすいです。

15.1 grow・shrink・basisで覚える

flex は「grow、shrink、basis」と覚えるのが最も簡単です。growは伸びる、shrinkは縮む、basisは基準サイズです。

この3語を覚えれば、flex: 1 0 300px; のような指定を見たときに、伸びる、縮まない、300px基準だと理解できます。

15.2 よく使う3パターンを覚える

最初に覚えるべきパターンは、flex: 1;、flex: 1 1 auto;、flex: 0 0 300px; です。これだけでも多くのレイアウトに対応できます。

均等幅なら flex: 1;、柔軟なメインなら flex: 1 1 auto;、固定サイドバーなら flex: 0 0 300px; と覚えると使いやすいです。

15.3 迷ったら3値で書く

flex の省略が分かりにくい場合は、3値で書くのがおすすめです。flex: 1 1 auto; のように書けば、grow、shrink、basisが明確になります。

チーム開発でも、3値指定は意図が伝わりやすいです。特にレイアウトの重要部分では、省略しすぎない方が安全です。

15.4 固定か可変かで選ぶ

要素が伸びてよいならgrowを1にし、伸びてほしくないなら0にします。縮んでよいならshrinkを1にし、縮んでほしくないなら0にします。

基準サイズを内容に任せるならauto、固定したいならpxなどを指定します。このように固定か可変かで考えると、flex の値を選びやすくなります。

15.5 最終チェック表

15.6 まとめコード

以下は、実務で使いやすい flex ショートハンドの総まとめ例です。

ファイル名: style.css｜言語: CSS｜用途: flexショートハンドの実務パターン総まとめ

.header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo {
  flex: none;
}

.nav {
  flex: 1 1 auto;
  min-width: 0;
}

.page {
  display: flex;
  gap: 32px;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar {
  flex: 0 0 300px;
}

.card {
  flex: 1;
}

おわりに

flex ショートハンドプロパティは、flex-grow、flex-shrink、flex-basis の3つをまとめて指定するCSSです。flex-grow は余ったスペースをどれだけ受け取るか、flex-shrink はスペースが足りないときにどれだけ縮むか、flex-basis は伸縮前の基準サイズを決めます。

実務では、均等幅なら flex: 1;、内容を考慮するメイン領域なら flex: 1 1 auto;、固定サイドバーなら flex: 0 0 300px;、固定要素なら flex: none; と覚えると使いやすいです。特に2カラムレイアウトでは、メインカラムに min-width: 0; を入れることで、長いテキストやコードによるはみ出しを防ぎやすくなります。

flex は短く書ける便利なプロパティですが、短いからこそ中身を理解することが重要です。grow、shrink、basisの3つを分解して考えれば、Flexboxのサイズ調整で迷うことが大きく減ります。