【CSS】「flex: 1;」ってなに？ これ1行でレイアウトが整う理由を解説！
はじめに
こんにちは！株式会社TOKOSのユウマです！
WEB制作をしている際、「flexboxを使っているけど子要素の幅がうまく調整できない...」といった経験があるのではないでしょうか。
今回はそんなお悩みを解決するプロパティflex: 1;について、初心者向けに仕組みと効果をわかりやすく解説します。
「なぜ等間隔で並ぶの？」「何をしているの？」という疑問を解消し、実際のコーディングに活かせる知識を身につけましょう！
「flex: 1;」の正体は3つの値の省略形
.box {
flex: 1 1 0;
}実はflex: 1;は以下の3つをまとめた書き方なのです！
flex-grow
意味：要素がどれだけ伸びるか
説明：flexアイテムの伸び率を指定するプロパティ。
flex-shrink
意味：要素がどれだけ縮むか
説明：flexアイテムの圧縮率を指定するプロパティ。
flex-basis
意味：基本の大きさ
説明：アイテムの基本の幅を指定するプロパティ。
先述したようにflex: 1;は、flex-grow: 1;、flex-shrink: 1;、flex-basis: 0;を省略した書き方なので、「残りの空きスペースを均等に分け合って伸び縮みする」という指定になります。
実際に見てみよう！
実際に「flex: 1;」を指定してみよう！
<div class="container">
<div class="box box1">A</div>
<div class="box box2">B</div>
<div class="box box3">C</div>
</div>.container {
display: flex;
gap: 10px;
}
.box {
background: lightblue;
text-align: center;
padding: 50px;
}
.box1 {
flex: 1;
}この場合、box1は残りの空きスペースを全て使って広がります。
全ての要素に「flex: 1;」を指定したら？
.box1,
.box2,
.box3 {
flex: 1;
}こうすることで、box1、box2、box3はそれぞれ均等に幅を分け合います。
つまり、width等で幅を指定せずとも「等間隔に揃ったきれいなレイアウト」が一瞬で完成するんです！
「flex: 2;」にしたらどうなる？
もしflex: 2;のように数字を変えると、数字が大きい要素がより多くのスペースを取るようになります。
たとえばflex: 2;とflex: 1;なら、flex-basis: 0のため全体のスペースを2:1の比率で分け合います。
<div class="container">
<div class="box box1">A</div>
<div class="box box2">B</div>
</div>.container {
display: flex;
gap: 10px;
}
.box {
background: lightblue;
text-align: center;
padding: 50px;
}
.box1 {
flex: 2;
}
.box2 {
flex: 1;
}実用例を見てみよう！
実際にWEB制作時にflex: 1;を活用できる実用例を挙げてみます。
<div class="c-company">
<div class="c-company__row">
<div class="c-company__header">会社名</div>
<div class="c-company__data">株式会社TOKOS</div>
</div>
<div class="c-company__row">
<div class="c-company__header">代表者</div>
<div class="c-company__data">石津敬浩 西原月熙</div>
</div>
<div class="c-company__row">
<div class="c-company__header">資本金</div>
<div class="c-company__data">5,200,000円</div>
</div>
<div class="c-company__row">
<div class="c-company__header">取扱業務</div>
<div class="c-company__data">システム開発 WEBサイト制作 ECサイト構築</div>
</div>
<div class="c-company__row">
<div class="c-company__header">所在地</div>
<div class="c-company__data">
〒150-0043<br />
東京都渋谷区道玄坂1丁目10番8号渋谷道玄坂東急ビル2F−C
</div>
</div>
</div>こちらはよくある会社概要ですが、横並びの.c-company__headerと.c-company__dataの幅がバラバラでレイアウトが崩れてしまっています。
ここで、.c-company__rowにdisplay: flex;を指定し、.c-company__headerにflex: 1;、.c-company__dataにflex: 2;をそれぞれ記述してみましょう！
.c-company__row {
display: flex;
}
.c-company__header {
flex: 1;
}
.c-company__data {
flex: 2;
}残っていたスペースが均等に分配され、レイアウトが整いました！
ユウマ「flexboxのレイアウトを整えたい」となったら、「flex: 1;が使えるかも！」という発想で試してみてください！
さいごに
固定幅を使わずにレイアウトの調整が簡単にできるflex: 1;は、均等レイアウトを作る最強の味方です。
また、数字を変更することで、それぞれの要素の比率を調整できるのでとても便利なプロパティです。
ぜひ今回の記事を参考に、デザイン通りのレイアウトを実装するためにflex: 1;を活用してみてください！
この記事を書いた人
