VIDEO LESSON

CSSのflex-growの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:27動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、フレックス・グロウです。
0:06これはフレックスボックスの項目が、親の中に余った幅があるときに、その余りをどれだけ受け取って広がるかを決めるプロパティです。
0:16余裕がある場面でだけ働くのが大きな特徴で、幅が足りないときには働きません。
0:21この動画では、イチとゼロという二つの値を比べて、対象の項目が残りの幅を受け取って広がるか、
0:26広がらずに余白が残るかを確認します。
0:31たとえば本文を広く見せたい記事ページや、ナビゲーションの横並びを思い浮かべるとイメージしやすいはずです。
0:39基本の書き方、伸びる仕組み、実例、効かないときの確認まで順番に見ていきましょう。
0:45まず基本の書き方です。
0:47セレクターのあとに、フレックス・グロウ、コロン、値、セミコロンを書きます。
0:53スライドの例では、デモというクラスを持つ項目にイチを指定しています。
0:59ここで大切なのは書く場所です。
1:01フレックス・グロウは横並びにしたい親ではなく、並べられる子、つまりフレックスアイテム自身に書きます。
1:10親にはあらかじめディスプレイ、フレックスを指定しておく必要があります。
1:16親が並べ方の土台を用意し、子が自分の伸び方を決める、という役割分担をまず覚えてください。
1:23伸びる仕組みを整理します。
1:25フレックス・グロウが働くのは、項目の基準サイズの合計よりも親の幅が広く、
1:29余った空間があるときだけです。
1:33たとえば基準が6レムの項目が三つ並び、親がそれより広ければ、残りの幅を誰かが受け取らなければ右側に空白が残ります。
1:41その余りを、グロウの係数の比率に応じて分け合い、指定のある項目が広くなります。
1:47ですから最終的な幅は、係数だけで決まるのではなく、出発点となるフレックス・ベイシスや内容そのものの幅にも影響されます。
1:56逆に、幅が足りない場面では、グロウではなくシュリンクの方が関係するので、
1:59混同しないようにしましょう。
2:03指定できる値を見ていきます。
2:06値はゼロ以上の数値で、単位は付けません。
2:09ゼロは広がらないという指定で、これが初期値です。
2:13余った幅があっても項目は基準の大きさのままになり、空白が残ります。
2:18イチを指定すると、その項目が余りを受け取る候補になります。
2:23一つだけイチなら余りを一人で受け取り、複数がイチなら同じ割合で分け合います。
2:29ニなら、イチの項目の二倍の余りを受け取ります。
2:33マイナスの値は無効です。
2:35まずはゼロとイチの違い、つまり広がるか広がらないかから押さえ、比率の調整はそのあとで試すのがおすすめです。
2:44初期値と継承を確認します。
2:46フレックス・グロウの初期値はゼロで、通常の継承はしません。
2:50親に書いても子へ自動で受け継がれないので、広げたいフレックスアイテムごとに指定します。
2:56一括指定フレックスとの関係も重要です。
2:59フレックス、ゼロ、イチ、6レムと書いたとき、一番目のゼロがまさにこのグロウです。
3:04あとから伸び方だけを変えたいときは、フレックス・グロウを単体で書くのが安全です。
3:10一括指定で書き直すと、縮む係数や基準サイズまで一緒に変わってしまうからです。
3:15インヘリットやイニシャルなどの共通キーワードの考え方は、ほかのプロパティと同じです。
3:21実例を見ていきます。
3:23まずエイチティーエムエルの用意です。
3:26ステージという親の箱の中に、項目が三つ入っています。
3:29一つ目と三つ目は通常の項目、二つ目だけが対象で、アイテムとデモ、二つのクラスを持っています。
3:36頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
3:41親と子の構造そのものが例の一部です。
3:44この例では親の幅に余裕を用意し、二番目の対象だけ伸び方を変えて、ほかの項目とどう違うかを見比べます。
3:52対象が余った幅を受け取って広がる様子に注目してください。
3:56次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
4:01ステージはディスプレイ、フレックスで項目が横に並び、最大幅は30レムです。
4:07各項目の土台はフレックス、ゼロ、イチ、6レムで、基準は6レム、伸びる係数はゼロの状態です。
4:15そして主役は最後の行で、デモだけにフレックス・グロウ、イチを指定し、余りを受け取るようにしています。
4:23すると対象だけが残りの幅を受け取って広がり、ほかの二つは基準のまま残ります。
4:29土台の指定は共通なので、最後の一行だけに注目してください。
4:34対象だけ枠線が太く背景が付いているので、どれが広がったか一目で分かります。
4:40値を変えて比べてみましょう。
4:42最後のフレックス・グロウの値だけを、イチからゼロへ置き換えます。
4:46ファイルを保存してブラウザーを再読み込みすると、二番目の対象もほかの項目と同じように広がらなくなり、
4:51親の中に余白がそのまま残ります。
4:55エイチティーエムエルは一切変えていません。
4:58たった一つの係数を変えるだけで、広がっていた項目が基準の大きさに戻るわけです。
5:03ただし最終的な幅は基準サイズにも左右されるので、親の幅を変えたときの結果もあわせて観察すると理解が深まります。
5:11比較のコツは、変える値を一つだけにすることです。
5:14間違えやすい点を整理します。
5:16最も大切なのは、イチは幅を一等分する命令ではない、ということです。
5:21グロウは余った空間を配る比率であって、項目そのものの最終幅を直接決めるものではありません。
5:28出発点となる基準サイズや内容の幅も影響し、兄弟のグロウと相対的に評価されます。
5:34次に、親がフレックスになっていないと、子にグロウを書いても効きません。
5:39親への指定と子への指定を混同しないでください。
5:43さらに、親に余りがない場面では、そもそも配る空間がないため、値を変えても見た目が変わりません。
5:50効いていないのではなく、発動する条件がそろっていないだけ、という場合も多いのです。
5:56効かないときの確認手順です。
5:58まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
6:05次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
6:10スタイルズで宣言が無効になっていないか、フレックスの一括指定など別の宣言に上書きされていないかも重要です。
6:18コンピューテッドでフレックス・グロウの最終的な値を確認し、親の表示方式がフレックスになっているか、
6:23親の幅と項目の合計を比べて余りがあるかも調べましょう。
6:29最後に三百二十ピクセル程度の画面幅や文字の拡大でも、内容が利用できるかを確かめてください。
6:36最後に互換性とまとめです。
6:38フレックス・グロウは、クローム、エッジ、ファイアフォックス、サファリなど、
6:42現在の主要ブラウザーで広く対応しています。
6:47記事では、クロームは29以降、エッジは12以降、ファイアフォックスは20以降で補足条件あり、
6:53サファリは9以降などの記録が紹介されています。
6:58練習は、まずイチとゼロの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて、
7:03結果がどう変わるかを比べることです。
7:08まとめます。
7:09フレックス・グロウは、余った幅を項目へ配る割合を決める係数で、初期値はゼロ、
7:13継承はしません。
7:16関連するフレックス、フレックス・シュリンク、フレックス・ベイシスもあわせて確認すると理解が深まります。
7:25お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

flex-growの役割と主な指定値を解説。対象の項目が残りの幅を受け取って広がるかを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのflex-growの使い方：指定値・実例・効かない原因とブラウザー互換性 →