ISSEN 
はじめに
こんにちは！株式会社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,2,3はそれぞれ均等に幅を分け合います。
つまり、width等で幅を指定せずとも「等間隔に揃ったきれいなレイアウト」が一瞬で完成するんです！
「flex: 2;」にしたらどうなる？
もし「flex: 2;」など数字を変えると、数字が大きい要素がより多くのスペースを取るようになります。
たとえば「flex: 2;」と「flex: 1;」なら、「2」の方が2倍広がります。
<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;
}
.box {
flex: 1;
}
実用例を見てみよう！
実際にWEB制作時に「flex: 1;」を使用できる実用例を挙げてみます。
<table class="c-company__table">
<tr class="c-company__table-row">
<th class="c-company__table-header">会社名</th>
<td class="c-company-__table-data">株式会社TOKOS</td>
</tr>
<tr class="c-company__table-row">
<th class="c-company__table-header">代表者</th>
<td class="c-company__table-data">石津敬浩 西原月熙</td>
</tr>
<tr class="c-company__table-row">
<th class="c-company__table-header">資本金</th>
<td class="c-company__table-data">5,200,000円</td>
</tr>
<tr class="c-company__table-row">
<th class="c-company__table-header">取扱業務</th>
<td class="c-company__table-data">システム開発 WEBサイト制作 ECサイト構築</td>
</tr>
<tr class="c-company__table-row">
<th class="c-company__table-header">所在地</th>
<td class="c-company__table-data">〒150-0043<br>
東京都渋谷区道玄坂1丁目10番8号渋谷道玄坂東急ビル2F−C</td>
</tr>
</table>こちらはよくある会社概要になりますが、横並びの「c-company__table-header」と「c-company__table-data」の幅がバラバラでレイアウトが崩れてしまっています。
ここで、「c-company__table-header」に「flex: 1;」、「c-company__table-data」に「flex: 2;」をそれぞれ記述してみましょう！
.c-company__table-header {
flex: 1;
}
.c-company__table-data {
flex: 2;
}
残っていたスペースが均等に分配され、レイアウトが整いました！
「flex-boxの中身を整えたい」となったら、「flex: 1;が使えるかも！」という発想で試してみてください✨️
おわりに
固定幅を使わずにレイアウトの調整が簡単にできる「flex: 1;」は、均等レイアウトを作る最強の味方となります。
また数字を変更することで、それぞれの要素の比率を調整できるのでとても便利なプロパティとなっています。
ぜひ今回の記事を参考に、デザイン通りの作品の実装をするため「flex: 1;」を活用してみてください！
スポンサーリンク
