よく見かける「flex: 1;」の意味と使い方について【CSS】

最終更新日：2025-01-30

公開日：2025-01-30

ページ内に広告が含まれています。

Flexboxをよく使用している人であればflex: 1;という表記を見る事もあるかと思います。または意味をよく理解しないで使用している人も多いかと思います。
先日、display: flex;の子要素を横並びで均等幅に配置する方法と余白設定について【CSS】でflex: 1;を少し解説しましたが、今回はflex: 1;の意味と使い方について詳しく解説していきます。

flexプロパティについて
flex: 1;を使用した例
flex-growについて
flex-shrinkについて
flex-basisについて
flex: 1;の応用例
さいごに

flexプロパティについて

flexプロパティとは。以下の3つのプロパティをまとめたショートハンド(省略形)です。

flex-grow
flex-shrink
flex-basis

flex: 1;はこれらをそれぞれ、flex-grow: 1;、flex-shrink: 1;、flex-basis: 0;と指定したのと同じ意味となります。
flex: 1;を使用すると、同じ親要素内にある指定した要素を均等幅にすることが可能です。

例えば、「flex: 2;」とするとflex-grow: 2;となり、数が増えても他のプロパティは変化しません。

flex: 1;を使用した例

続いてflex: 1;を使用した例を解説します。
まずは、単純なリスト要素をflex: 1;を指定しない場合と、指定した場合の違いを見ていきましょう。

<ul>
    <li>子要素1</li>
    <li>子要素2</li>
</ul>

ul {
    display: flex;
    background-color: #F4F4F4;
}
li {
    padding: 15px;
}
li:nth-child(1) {
    background-color: #FCD;
}
li:nth-child(2) {
    background-color: #DFC;
}

子要素1
子要素2

上記例のように、flex: 1;を指定しないと子要素がただ横並びになるだけとなります。
次にflex: 1;を指定した場合です。

li {
    flex: 1;
    padding: 15px;
}

子要素1
子要素2

このように均等幅での配置になります。
なぜこのようになるかは、最初にお伝えしたflex-grow・flex-shrink・flex-basisの3つのプロパティによるものとなります。では、この3つのプロパティについて次項で詳しく解説していきます。

flex-growについて

flex-glowプロパティは、親要素の横幅の余りを割り振る割合を示します。
先程の例の場合li要素が2つあり、flex: 1;でflex-glow: 1;を両方に指定していることから、1対1の割合で親要素の幅のあまりを割り振っています。

例として、1つ目のli要素にflex-glow: 2;であるflex: 2;を、2つ目のli要素にflex: 1;を指定した場合、

li:nth-child(1) {
    flex: 2;
}
li:nth-child(2) {
    flex: 1;
}

子要素1
子要素2

上記のように2対1の割合で親要素の幅の余りが割り振られます。
初期値は「0」となるため、指定していない場合は要素自体の幅での横並びになります。

flex-shrinkについて

flex-shrinkプロパティは、親要素からはみ出した場合に指定した各子要素の幅を縮める割合を示します。
このプロパティの初期値は「1」となるため、何も指定しない場合に横幅がはみ出ずぎゅうぎゅうになるのはその為です。

値を「0」にする事で、親要素からはみ出した部分を縮めずそのまま表示する事が出来ます。
これを使用すると、わざとはみ出したレイアウトを実装する事も可能です。

flex-basisについて

flex-basisプロパティは、display: flex;が指定された要素の子要素の大きさを指定出来るプロパティです。
初期値は「auto」で自動的に大きさが決定されますが、数値+pxや%での指定も可能です。

widthと併用して記述した場合はflex-basisが優先されます。またFlexboxの子要素の並ぶ方向(縦横)によって横幅か高さの基準が変わります。

flex: 1;を指定した場合はflex-basisは「0」になるので、子要素の幅は0になります。
この場合、flex-growが「1」になるので親要素の幅が均等に割り振られ、均等幅の子要素になるわけです。

flex: 1;の応用例

flex: 1;のよくある使い方としては、先ほどの均等幅にするのが一般的かと思いますが以下のような使い方もあります。

固定幅 + 残りをflex: 1;

これは、ブログの記事一覧やお知らせ投稿一覧などによくある、写真+記事の本文抜粋などの表示です。
以下に表示例も合わせて掲載します。

<div class="box">
    <img src="/file/sample_img.jpg" width="80" height="53" alt="サンプルイメージ">
    <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>

.box {
    display: flex;
    align-items: center;
    gap: 20px;
}
.box img {
    width: 80px;
    height: auto;
}
.box p {
    flex: 1;
}

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。。

上記例では、画像は固定幅を指定して固法のテキスト部分にflex: 1;(親要素の余り幅を割付)しています。
テキスト部分の余白はgapでも、テキスト部分にmarginやpaddingでも大丈夫です。
gapを使用しての余白の取り方に関しては、display: flex;の子要素を横並びで均等幅に配置する方法と余白設定について【CSS】をご覧ください。