SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 8:09動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、フレックスです。
  4. 0:06これはフレックスボックスの項目が、どれだけ伸びるか、どれだけ縮むか、そして伸び縮みする前の基準の大きさを、
  5. 0:12まとめて決める一括指定のプロパティです。
  6. 0:17親の箱に余裕があれば項目を広げ、逆に幅が足りなければ項目を縮める、といった柔軟な横並びを作るときの中心になる指定です。
  7. 0:27この動画では、伸び縮みする指定と、大きさを固定する指定を比べて、違いを確認します。
  8. 0:33ナビゲーションやカードの横並びなど、実際のページでも登場する場面が多い指定です。
  9. 0:40基本の書き方、三つの数字の意味、実例での動き、効かないときの確認まで、順番に見ていきましょう。
  10. 0:47まず基本の書き方です。
  11. 0:49セレクターのあとに、フレックス、コロン、値、セミコロンを書きます。
  12. 0:54スライドの例では、デモというクラスを持つ項目に、1、1、12レムと指定しています。
  13. 1:01この三つの値が、この動画の主役です。
  14. 1:03ここで大切なのは書く場所です。
  15. 1:06フレックスは、横並びにしたい親ではなく、並べられる子、つまりフレックスアイテム自身に書きます。
  16. 1:13親にはあらかじめ、ディスプレイ、フレックスを指定しておく必要があります。
  17. 1:19親が並べ方の土台を用意し、子が自分の伸び縮みのルールを決める、という役割分担をまず覚えてください。
  18. 1:27三つの数字の読み方を整理します。
  19. 1:29一つ目はフレックス・グロウで、余った幅をどれだけ受け取って伸びるかを表します。
  20. 1:361なら余白の分配に参加し、0なら伸びません。
  21. 1:39二つ目はフレックス・シュリンクで、幅が足りないときにどれだけ縮むかを表します。
  22. 1:461なら縮み、0なら縮みません。
  23. 1:48三つ目はフレックス・ベイシスで、伸び縮みする前の基準の大きさです。
  24. 1:5312レムや、パーセント、オートなどが使えます。
  25. 1:57左から、伸びる、縮む、基準、の順番だと覚えてください。
  26. 2:01たとえばグロウが2の項目は、1の項目のおよそ2倍の余白を受け取ります。
  27. 2:07比率で配分される点もポイントです。
  28. 2:10この順番さえ押さえれば、省略記法も怖くありません。
  29. 2:14キーワードと短い書き方も見ておきます。
  30. 2:17フレックス、オートは、1、1、オートと同じで、内容に合わせた大きさから伸び縮みします。
  31. 2:24フレックス、ノンは、0、0、オートと同じで、伸びも縮みもせず、内容どおりの大きさを保ちます。
  32. 2:32フレックス、イニシャルは、0、1、オートで、伸びはしませんが、必要なときは縮みます。
  33. 2:40また、フレックス、1のように数字をひとつだけ書くと、基準がゼロになって、
  34. 2:44余った幅を均等に分け合う形になります。
  35. 2:49等幅の列を作りたいときによく使う書き方です。
  36. 2:53目的に合わせて、数字とキーワードを使い分けてください。
  37. 2:58初期値と継承を確認します。
  38. 2:59フレックスは一括指定なので、初期値は、構成する三つの個別プロパティ、それぞれの初期値を参照します。
  39. 3:06何も指定しない状態は、伸びる係数が0、縮む係数が1、基準がオートで、内容に合わせた大きさを保ちながら、
  40. 3:11必要なときだけ縮む動きになります。
  41. 3:16そして通常の継承はしません。
  42. 3:18親要素にフレックスを書いても、子へ自動で受け継がれることはありません。
  43. 3:22フレックスボックスの直接の子である項目ごとに指定するプロパティだと考えてください。
  44. 3:28共通キーワードのインヘリットやイニシャル、アンセットの考え方は、ほかのプロパティと同じです。
  45. 3:34迷ったら個別プロパティで確認すると整理しやすくなります。
  46. 3:38親全体の並べ方はディスプレイ、個別の伸び縮みはフレックス、という整理が要点です。
  47. 3:44実例を見ていきます。
  48. 3:46まずエイチティーエムエルの用意です。
  49. 3:49ステージという親の箱の中に、項目が三つ入っています。
  50. 3:53一つ目と三つ目は通常の項目、二つ目だけが対象で、アイテムとデモ、二つのクラスを持っています。
  51. 4:01頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
  52. 4:08親と子の構造そのものが例の一部です。
  53. 4:11この例では、二番目に書かれた対象だけにフレックスを指定して、ほかの項目とどう大きさが変わるかを比べます。
  54. 4:20三つの項目は横並びになる想定で、対象の幅の変化に注目してください。
  55. 4:26次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  56. 4:30ステージはディスプレイ、フレックスとし、隙間はれい点ごレム、項目は横に並びます。
  57. 4:36ほかの項目には、フレックス、0、1、6レムを指定し、基準は小さめにしておきます。
  58. 4:43そして主役は最後の行で、デモにフレックス、1、1、12レムを指定します。
  59. 4:48すると対象は、12レムを基準にしながら、余った幅を受け取って伸び、幅が足りなければ縮む、
  60. 4:52柔軟な項目になります。
  61. 4:57土台は共通なので、最後の指定だけに注目してください。
  62. 5:01枠線が太く背景が付いた対象が、広く表示される様子を確認しましょう。
  63. 5:06値を変えて比べてみましょう。
  64. 5:08最後のフレックスの値だけを、1、1、12レムから、0、0、8レムへ置き換えます。
  65. 5:14ファイルを保存してブラウザーを再読み込みすると、二番目に書かれた対象が、
  66. 5:19今度は8レムの幅を保ったまま、伸びも縮みもしなくなります。
  67. 5:24画面を広げても狭めても、対象の幅はほぼ固定です。
  68. 5:28エイチティーエムエルは一切変えていません。
  69. 5:31三つの数字を変えるだけで、柔軟な項目と固定の項目が切り替わる点が、フレックスの分かりやすい特徴です。
  70. 5:39比較のコツは、変えるのはこの値ひとつだけにすることです。
  71. 5:43間違えやすい点を整理します。
  72. 5:45まず、省略したつもりでも、フレックスを書くと三つの成分すべてが上書きされます。
  73. 5:52基準だけ変えたいのに、伸び縮みの係数まで初期の状態に戻ってしまうことがあるので、
  74. 5:57三成分を意識してください。
  75. 6:02次に、等幅にしたのに崩れる場合は、子の自動の最小サイズが原因のことがあります。
  76. 6:09長い文章や大きな画像があると、項目が想定より縮まずにはみ出します。
  77. 6:15そのときは、ミン・ウィズ、ゼロなどを検討してください。
  78. 6:20また、親がフレックスになっていないと、子にフレックスを書いても効きません。
  79. 6:27特にベイシスにオートを指定した場合は、幅の指定や内容の大きさが基準に影響します。
  80. 6:34この関係もあわせて確認してください。
  81. 6:37誰に何を書いたかを確認しましょう。
  82. 6:40効かないときの確認手順です。
  83. 6:42まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
  84. 6:50次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
  85. 6:56スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。
  86. 7:02コンピューテッドで、フレックス・グロウ、シュリンク、ベイシスの最終的な値を確認し、
  87. 7:08親の表示方式がフレックスになっているかも調べましょう。
  88. 7:13最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容がはみ出さずに利用できるかを確かめてください。
  89. 7:21最後に互換性とまとめです。
  90. 7:23フレックスは、クローム、エッジ、ファイアフォックス、サファリなど、現在の主要ブラウザーで広く対応しています。
  91. 7:32記事では、クロームは29以降、サファリは9以降などの記録が紹介されています。
  92. 7:37練習は、まず1、1、12レムと、0、0、8レムの違いを自分の言葉で説明し、
  93. 7:42次に親の幅や文章量だけを変えて結果を比べることです。
  94. 7:47値だけを変えて結果を比べる練習を繰り返すと、三つの数字の働きが体で覚えられます。
  95. 7:53まとめます。
  96. 7:54フレックスは、伸びる係数、縮む係数、基準の大きさをまとめて決める指定で、
  97. 7:57継承はしません。
  98. 8:01関連するフレックス・グロウ、シュリンク、ベイシスもあわせて確認すると理解が深まります。
  99. 8:07お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

flexの役割と主な指定値を解説。伸縮できる項目と固定の基準サイズを保つ項目を比べます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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