WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： かなでん
カテゴリー： マークアップ >CSS

Flexboxを使って要素を横並びにするとき、子要素の幅を比率に応じて分配する方法の一つが「flexプロパティ（flex:1;）」です。
普段感覚的に使っているけれど、改めて具体的な意味や仕組みを聞かれるとよく分からない、という方もいるのではないでしょうか？

今回は、flexプロパティの使い方や仕組みについて解説していきます！

flexプロパティ（flex:1;）とは？

flexプロパティとは、Flexboxの子要素（フレックスアイテム）の伸び縮みする比率や、基準となるサイズを指定するためのプロパティです。

例えば、横並びにした要素の間に余ったスペースがあれば、そのスペースを分け合って要素を広げることができます。
反対に、要素の幅が大きくなりすぎて親要素に収まらない場合は、要素を縮めて収めることもできます。

flex:1;を指定するとどうなる？

では、実際に「flex:1;」を使ってみましょう！

例えば、以下のように3つの要素を横並びにし、それぞれにflex:1;を指定します。

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>

.container{
    display: flex;
    gap: 10px;
    width: 900px;
}

.item{
    flex: 1;
    padding: 60px;
    font-size: 42px;
    text-align: center;
    background-color: sandybrown;
}

すると、3つの要素がFlexboxで利用できるスペースを1:1:1の割合で分け合うようになります。

親要素の幅が900pxで、3つの要素にflex:1;を指定した場合、

• 要素A:1
• 要素B:1
• 要素C:1

900px÷3=300px
※ここからgap分を除くため、実際の数値は若干異なります。

となり、それぞれが同じ幅になります。

また、値を変えることで、幅の比率を変更することもできます。

<div class="container">
    <div class="item item-a">A</div>
    <div class="item item-b">B</div>
    <div class="item item-c">C</div>
</div>

.item-a {
    flex: 2;
}

.item-b,
.item-c {
    flex: 1;
}

この場合は、要素A・B・Cが2:1:1の割合でスペースを分け合います。

このように、flexの値を使って「何対何でスペースを分けるか」を指定できるのが、flex:1;の大きな特徴です。

flexプロパティは、３つのプロパティの省略形！

実は、flexプロパティは以下の３つのプロパティをまとめて指定できるショートハンド（省略記法）です。

• flex-grow：余ったスペースをどのくらい分け合って伸びるか
• flex-shrink：スペースが足りないとき、どのくらい縮むか
• flex-basis：伸び縮みする前の基準となるサイズ

それぞれの役割を詳しく見ていきましょう。

flex-grow

余ったスペースをどのくらい分け合って伸びるかを指定します。

初期値は0で、flex-growを指定していない状態では余ったスペースがあっても基本的には伸びません。

例えば、2つの要素に

.item {
    flex-grow: 1;
}

と指定すると、余ったスペースを1:1の割合で分け合って広がります。

値を変えることで、伸びる割合を変えることもできます。

flex-shrink

スペースが足りないときに、どのくらい縮むかを指定します。

初期値は1です。

例えば、複数の要素の合計サイズが親要素の幅を超えた場合、flex-shrinkの値に応じて要素が縮み、親要素の中に収まろうとします。

0を指定すると、その要素はFlexboxによる縮小をしなくなります。

flex-basis

伸び縮みする前の基準となるサイズを指定します。
pxや%などを使って指定することができます。

.item {
    flex-basis: 300px;
}

この場合、300pxを基準としてFlexboxによる伸び縮みが計算されます。

なお、初期値はautoで、widthなどの指定を基準にする場合があります。

flex:1;は何を省略している？

ここまで見てきた3つのプロパティを、1つにまとめて指定できるのがflexプロパティです。

例えば、

.item {
    flex: 1;
}

と指定した場合、基本的には以下のような値として扱われます。

.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

つまり、flex:1;は単純に「flex-grow:1;」という意味ではなく、
「余ったスペースがあれば1の割合で伸び、スペースが足りなければ縮み、サイズを計算するときの基準を0%にする」
という指定を、短くまとめて書いているものです。

そのため、複数の要素にflex:1;を指定すると、それぞれが同じ条件でスペースを分け合い、結果として均等な幅になりやすくなります。

flex:1;とwidth:50%;の違い

2つの要素を横並びにして均等な幅にしたい場合、「width:50%;」を使う方法もあります。

では、flex:1;とwidth:50%;では、どのような違いがあるのでしょうか？

どちらも、2つの要素を均等に横並びにすることができますが、gapを指定した場合に違いがあります。

例えば、親要素の幅が900pxで、gap:20px;を指定した場合を考えてみましょう。
子要素にwidth:50%;を指定すると、それぞれの要素は親要素の50%である450pxになります。

450px + 450px + 20px = 920px

このように、width:50%;はgapを考慮して幅を計算するわけではないため、単純に50%ずつ指定すると、gapを含めた合計が親要素の幅を超えてしまいます。

一方、flex:1;の場合は、gapを除いた残りのスペースを2つの要素で分け合います。

900px – 20px = 880px
880px ÷ 2= 440px

それぞれ440pxとなり、gapを含めても親要素の幅に収まります。

このように、width:50%;は親要素の幅を基準に割合を指定するのに対し、flex:1;はgapなどを除いた、Flexboxで利用できるスペースを分け合うことができます。

そのため、gapを使って要素間の余白を設定しながら、要素を均等に並べたい場合には、flex:1;が便利です。

まとめ

今回は、flex:1;の仕組みや、flex-grow・flex-shrink・flex-basisとの関係について解説しました。

flex:1;は、複数の要素で利用できるスペースを分け合うための指定です。width:50%;との違いも理解しておくことで、レイアウトに合わせて使い分けることができます。

普段何となく使っていたflex:1;も、仕組みを理解しておくことで、より意図的に使えるようになります。

flex:1;を使う場面で、今回の内容が少しでも参考になれば幸いです！