SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、フレックス・ラップです。
  4. 0:07これは、フレックスボックスで横に並べた項目が、親の幅に入りきらなくなったときに、
  5. 0:12次の行へ折り返すかどうかを決めるプロパティです。
  6. 0:17折り返せば、カードやボタンが画面幅に合わせて下の段へ移動し、読みやすい大きさを保てます。
  7. 0:24折り返さなければ、すべての項目が一列に残り、縮んだりはみ出したりします。
  8. 0:30この動画では、代表的な値であるラップとノーラップを比べて違いを確認します。
  9. 0:36基本の書き方、主な値、実例、効かないときの確認まで、順番に解説します。
  10. 0:42特に、項目の数が決まっていない一覧や、スマートフォンで画面幅が狭くなる場面では、
  11. 0:46この折り返しの考え方が欠かせません。
  12. 0:51まず基本の書き方です。
  13. 0:53セレクターのあとに、フレックス・ラップ、コロン、値、セミコロンを書きます。
  14. 1:00スライドの例では、デモというクラスを持つ要素に、ラップを指定しています。
  15. 1:07ここで大切なのは書く場所です。
  16. 1:10このプロパティは、並べられる子ではなく、並べ方を決める親のコンテナーに書きます。
  17. 1:17親がディスプレイ、フレックスで項目を並べ、その親に対して折り返しを許可する、
  18. 1:22という役割分担を覚えてください。
  19. 1:27子に一つずつ書いても全体の折り返しは変わらないので、まずは親子関係を確認する習慣をつけましょう。
  20. 1:36指定できる主な値を確認します。
  21. 1:38ノーラップは折り返さず、すべての項目を一つの行に並べます。
  22. 1:43入りきらない場合は、項目が縮むか、親からはみ出すことがあります。
  23. 1:48ラップは、主軸の幅に入りきらない項目を次の行へ送り、複数行に分けて並べます。
  24. 1:55これが、カード一覧などで最もよく使う値です。
  25. 1:58ラップ・リバースも折り返しますが、行が積み重なる方向が通常と逆になります。
  26. 2:05見た目の上下が入れ替わるため、使う場面は限られます。
  27. 2:09まずはノーラップとラップの違いをしっかり押さえ、リバースはそういう値もあると覚えておきましょう。
  28. 2:17初期値と継承を確認します。
  29. 2:19フレックス・ラップの初期値はノーラップです。
  30. 2:22つまり、何も指定しなければ、項目は折り返さずに一列へ並ぼうとします。
  31. 2:28カードが勝手に下へ落ちないのは、この初期値のためです。
  32. 2:32通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。
  33. 2:38折り返したいコンテナーごとに指定してください。
  34. 2:42また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。
  35. 2:48ブラウザーの既定スタイルや別のクラスが重なると見た目が変わることもあるので、
  36. 2:53最終的には開発者ツールで確認しましょう。
  37. 2:57折り返しの仕組みを整理します。
  38. 3:00初期状態の横並びでは、主軸は左右方向です。
  39. 3:03項目を左から順に置いていき、親の幅を使い切ると、ラップを指定した場合だけ、
  40. 3:07残りの項目が次の行の左から再び並び始めます。
  41. 3:11こうして行が増えると、項目は交差軸である上下方向へ積み重なります。
  42. 3:16行と行の間隔はギャップで空けることができ、複数行全体の上下の配り方はアライン・コンテンツで調整できます。
  43. 3:23逆にノーラップでは行は一つだけなので、アライン・コンテンツを指定しても効果が見えません。
  44. 3:29折り返しが、複数行レイアウトの入り口になると考えてください。
  45. 3:34逆に、一行だけでよいナビゲーションなどでは、あえて折り返さずに並べる方が意図に合うこともあります。
  46. 3:41実例を見ていきます。
  47. 3:42まずエイチティーエムエルの用意です。
  48. 3:44ステージという外側の箱の中にデモがあり、その中に項目が六つ入っています。
  49. 3:49頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
  50. 3:54親と子の構造そのものが例の一部です。
  51. 3:57六つの項目は、あとで一つの幅にそろえられるため、親の幅に対して項目の合計が大きくなります。
  52. 4:03そのときに、入りきらない項目が下の行へ移るのか、一列に残るのかが、このあとの比較で一目で分かるようになっています。
  53. 4:11項目が多いほど、折り返しの効果は観察しやすくなります。
  54. 4:14次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  55. 4:19デモはディスプレイ、フレックスで横並びにし、ギャップで項目の間隔を空けます。
  56. 4:25項目は最初に小さい基準が与えられますが、最後の方でフレックス・ベーシスが7レムに指定され、
  57. 4:30一つ一つが横幅を持つようになります。
  58. 4:35六つ並べると親の幅を超えるため、主役であるフレックス・ラップ、ラップの指定により、
  59. 4:39入りきらない項目が次の行へ折り返します。
  60. 4:44土台の指定は違いを見やすくするためのものなので、項目が何行に分かれるかに注目してください。
  61. 4:51値を変えて比べてみましょう。
  62. 4:53最後のフレックス・ラップの値だけを、ラップからノーラップへ置き換えます。
  63. 4:58ファイルを保存してブラウザーを再読み込みすると、複数行に分かれていた項目が、
  64. 5:02すべて一つの行に残ろうとします。
  65. 5:06幅が足りない分は、項目の並びやはみ出し方に表れます。
  66. 5:10エイチティーエムエルや項目の中身は一切変えていません。
  67. 5:14ラップは入りきらない分を次の行へ逃がす指定、ノーラップは一列を保つ指定です。
  68. 5:19比較のコツは、変える値を一つだけにすることです。
  69. 5:23ほかの指定を同時に変えると、違いの原因が分からなくなります。
  70. 5:27画面幅を少しずつ狭くして、どのタイミングで次の行へ移るかを観察すると、親の幅と項目の幅の関係がよく分かります。
  71. 5:35間違えやすい点を整理します。
  72. 5:37記事でも特に注意されているのが、フレックス・シュリンクによる縮小です。
  73. 5:44ラップを指定しても、項目が縮んで一行に収まってしまえば、折り返す必要がなくなり、
  74. 5:48予想より折り返しません。
  75. 5:53そんなときは、子のフレックス・ベーシスやミニマム・ウィドス、つまり最小幅もあわせて確認してください。
  76. 6:01ベーシスが小さければ一行に収まりやすく、最小幅が大きければ早く折り返します。
  77. 6:08また、このプロパティは親に書く指定です。
  78. 6:11子へ設定する指定と混同しないように、対象と書く場所を分けて考えましょう。
  79. 6:18効かないときの確認手順です。
  80. 6:20まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
  81. 6:27次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
  82. 6:33スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。
  83. 6:40コンピューテッドでフレックス・ラップの最終的な値を確認し、あわせて親にディスプレイ、
  84. 6:47フレックスがあるか、項目の合計幅が本当に親を超えているか、子が縮んで収まっていないかも調べましょう。
  85. 6:54最後に、三百二十ピクセル程度の画面幅でも内容が利用できるか確かめてください。
  86. 7:00最後に互換性とまとめです。
  87. 7:02フレックス・ラップは、記事ではクローム29以降、エッジ12以降、ファイアフォックス28以降、
  88. 7:07サファリ9以降で対応すると紹介されています。
  89. 7:11値のラップとノーラップについては、さらに古い版からの記録もありますが、現在の主要ブラウザーでは広く使えます。
  90. 7:18練習は、まずラップとノーラップの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。
  91. 7:26まとめます。
  92. 7:26フレックス・ラップは折り返しの有無を決める指定で、初期値はノーラップ、継承はしません。
  93. 7:32お疲れさまでした。
  94. 7:33関連するフレックス・ディレクションやジャスティファイ・コンテンツもあわせて確認すると、
  95. 7:37配置の理解がさらに深まります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

flex-wrapの役割と主な指定値を解説。複数の項目が次の行へ折り返すかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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