Webページのコーディングをしている時で、flex-boxで要素を並べた時に
というように感じたことは無いでしょうか。
ここでは、flex-growの
・flexboxに余白がある場合、flex-growで綺麗に埋める方法
・flex-growが効かない場合に見直すこと
を解説します。是非参考にしてみてください。
目次
flex-growとは
flex-growの読み方
flex-growは「フレックス・グロー」と読みます。「フレックス」はこの場合伸縮するといった意味で使われます。
また「グロー」はこの場合伸びるという意味で使われています。
flex-growの説明
flex-growは、flexboxの子要素に設定するプロパティです。親要素の余白部分を指定した数値で切り分けて、その分の幅を自分のwidthやheightに追加して表示します。
下記のように、flex-growを設定しないときには、余白が表示されるような場合に、親要素いっぱいに子要素を並べる時に使います。
See the Pen
gOwwPgK by Yusuke (@writingyusuke)
on CodePen.
flex-growで利用できる値
flex-growでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| 数値 | 親要素の余り部分を割り振る割合 初期値は0であり、子要素の幅や高さは変わりません。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 11～ |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
flexboxに余白がある場合にflex-growで綺麗に埋める方法
flex-growの使い方
flex-growを使うと、全体的片側に要素が寄ってしまうような場合に、バランス良く子要素を並べることが出来ます。
下記のように、親要素内にある子要素を横並びにしたい場合には、flex-boxを利用するのがとても便利です。flex-boxは親要素のcssで、displayプロパティにflexを指定するだけで良いです。
|
1 2 3 4 5 |
<div class="parent"> <div class="child">Child A</div> <div class="child">Child B</div> <div class="child">Child C</div> </div> |
|
1 2 3 |
.parent{ display:flex; //これだけで子要素が横に並びます。 } |
しかし、このままの場合では、子要素である3つのdiv要素は左側に詰まって表示されてしまいます。
そこで、子要素にflex-growを追加すると上手い具合に、親要素いっぱいに子要素が広がって表示されるようになります。
|
1 2 3 4 |
/*のcssを追加するだけで、子要素が広がって均等に配置されたように見える*/ .child{ flex-grow: 1; } |
注意点
flex-growは下記のように動作します。
- 子要素の幅全てを計算する
- 親要素の幅と上記の幅の差分を算出する
- 差分を、子要素で設定したflex-growの割合で分ける
- 分けた幅を、子要素にそれぞれ足し合わせる
そのため下記のような注意点があります。
子要素の幅がflex-growの割合になるわけではない。
子要素に余りを足し合わせているため、flex-growに書いた通りの割合になるわけではありません。例えば、3つの子要素にそれぞれflex-growを2、2、3と設定しても。２対２対３にぴったり幅が指定されるわけではありません。
子要素に幅の広いものがあると、flex-growが上手く機能していないように見える
子要素の元の幅が大きすぎると、親要素との差分が小さくなります。その際に一見すると、flex-growが効いていないように見えることがあります。
子要素の合計が親要素の幅を超えると余白が無いので、何も変化しない
やはり、親要素との余白を切り分ける処理であるため、元から子要素の合計が親要素の幅より小さい場合には余白が０となります。そのため、flex-growで切り分けても0になるため、見た目の変化が起こりません。
flex-growが効かない場合に見直すこと
flex-growが効かない場合には、以下の事を見直してみてください。
・孫要素や更にその下の要素に指定されていないかを確認する。
flex-growはdisplay: flex;とした親要素からみた子要素でしか動作しません。
・子要素の合計が親要素を超えていないか確認する。
この場合flex-growを指定しても変化がありません。
・子要素に極端に幅の広い要素が無いかを確認する。
この場合にはflex-growの変化が小さすぎてわかりづらい場合があります。
・想定している動作と仕様が違っていないか確認する。
たとえば、要素を均等に並べたい、といった場合には別のプロパティを使う方が良いです
繰り返しになってしまうかもしれませんが、flex-growはあくまで親要素の余白が切り分けられ、子要素に追加されるイメージです。
まとめ
flex-growに関して説明してきました。
flexboxを使う際に、知っておいた方が良いプロパティです。ただし、flexboxで要素を並べる方法は他にもあるので、一つの方法として認識しておくと良いでしょう。
この記事が、Web制作やWebサイト開発の参考になれば幸いです。
