VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、フレックス・ベイシスです。
0:06これはフレックスボックスの項目について、伸びたり縮んだりする前の、基準の大きさを決めるプロパティです。
0:13ブラウザーはまずこの基準を置き、余った幅や足りない幅を計算して、最終的な大きさを決めます。
0:20横並びのときは幅の基準、縦並びのときは高さの基準になるのが大切なポイントです。
0:26この動画では、12レムと6レムという二つの基準を比べて、項目の幅の配分がどう変わるかを確認します。
0:33基本の書き方、値の種類、実例、効かないときの確認まで、順番に見ていきましょう。
0:38まず基本の書き方です。
0:40セレクターのあとに、フレックス・ベイシス、コロン、値、セミコロンを書きます。
0:47スライドの例では、デモというクラスを持つ項目に、12レムと指定しています。
0:53ここで大切なのは書く場所です。
0:55フレックス・ベイシスは、横並びにしたい親ではなく、並べられる子、つまりフレックスアイテム自身に書きます。
1:04親にはあらかじめ、ディスプレイ、フレックスを指定しておく必要があります。
1:10親が並べ方の土台を用意し、子が自分の基準の大きさを決める、という役割分担をまず覚えてください。
1:18値には長さや割合が使えます。
1:20基準の考え方を整理します。
1:22フレックス・ベイシスが決めるのは、主軸方向の大きさです。
1:27主軸とは、フレックス・ディレクションで決まる、項目が並ぶ方向の軸のことです。
1:32初期状態のロー、つまり横並びでは、主軸は横向きなので、ベイシスは幅の基準になります。
1:39一方、カラム、つまり縦並びにすると主軸は縦向きになり、ベイシスは高さの基準になります。
1:45ですから、ベイシスは常に幅だ、と覚えてしまうと縦並びで混乱します。
1:50並びの方向を確認してから、幅の話なのか高さの話なのかを判断してください。
1:56この切り替えが理解できると、縦並びメニューでも迷わなくなります。
2:01指定できる値を見ていきます。
2:03オートは、要素にもともと指定された幅や高さ、なければ中身の大きさに合わせる値で、
2:07初期値でもあります。
2:1012レムや200ピクセルのような長さを書けば、その大きさがそのまま基準になります。
2:1630パーセントのような割合も使え、親の主軸方向の大きさに対する比率で決まります。
2:22コンテンツは、中身が本来必要とする大きさを基準にする値です。
2:27固定したい部分には長さ、内容に合わせたい部分にはオートやコンテンツ、といった使い分けが基本です。
2:34まずは長さとオートの違いから押さえてください。
2:37初期値と継承を確認します。
2:39フレックス・ベイシスの初期値はオートで、通常の継承はしません。
2:44親に書いても子へ自動で受け継がれないので、フレックスアイテムごとに指定します。
2:50前回のフレックスとの関係も重要です。
2:53一括指定フレックスの三番目の値が、まさにこのベイシスです。
2:58たとえば、フレックス、0、1、6レムの6レムが基準を表します。
3:03あとから基準だけを変えたいときは、フレックス・ベイシスを単体で書くのが安全です。
3:09一括指定で書き直すと、伸びる係数や縮む係数まで一緒に変わってしまうからです。
3:15共通キーワードのインヘリットやイニシャル、アンセットの考え方は、ほかのプロパティと同じです。
3:22実例を見ていきます。
3:24まずエイチティーエムエルの用意です。
3:27ステージという親の箱の中に、項目が三つ入っています。
3:31一つ目と三つ目は通常の項目、二つ目だけが対象で、アイテムとデモ、二つのクラスを持っています。
3:39頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
3:44親と子の構造そのものが例の一部です。
3:47この例では、二番目の対象だけ基準を大きくして、ほかの項目と幅の配分がどう変わるかを比べます。
3:55三つが横並びになる想定で、特に対象の幅に注目してください。
3:59次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
4:05ステージはディスプレイ、フレックスとし、隙間はれい点ごレムで、項目が横に並びます。
4:12項目共通の指定は、フレックス、0、1、6レムで、基準は6レムです。
4:18そして主役は最後の行で、デモだけにフレックス・ベイシス、12レムを指定し、
4:22基準を2倍に上書きします。
4:26すると対象は、ほかの項目より広い幅から配分が始まり、目立って大きく表示されます。
4:33土台の指定は共通なので、最後の一行だけに注目してください。
4:38枠線が太く背景が付いた対象が、広く見える様子を確認しましょう。
4:44値を変えて比べてみましょう。
4:46最後のフレックス・ベイシスの値だけを、12レムから6レムへ置き換えます。
4:51ファイルを保存してブラウザーを再読み込みすると、二番目の対象の基準が、ほかの項目と同じ6レムに戻り、
4:56幅の配分もほぼ同等になります。
5:00エイチティーエムエルは一切変えていません。
5:03基準ひとつを変えるだけで、主役のように広かった項目が、並びの一つに戻るわけです。
5:09ただし、これはあくまで配分の出発点です。
5:12最終的な幅は、このあと伸び縮みの計算で決まる点も一緒に思い出してください。
5:17比較のコツは、変える値を一つだけにすることです。
5:21間違えやすい点を整理します。
5:23まず、フレックス・ベイシスは出発点であって、最終サイズそのものではありません。
5:29親に余りがあればフレックス・グロウで伸び、幅が足りなければフレックス・シュリンクで縮むため、
5:34表示幅がベイシスと一致しないのは普通のことです。
5:39次に、縦並びのカラムでは高さの基準になる点を忘れがちです。
5:43幅を指定したつもりで高さが変わり、驚くことがあります。
5:48また、親がフレックスになっていないと、子にベイシスを書いても効きません。
5:53親への指定と子への指定を混同しないでください。
5:56さらに、最小幅や最大幅の指定があると、計算結果がそちらで止まることもあります。
6:02誰に何を書いたか、順番に確認しましょう。
6:05効かないときの確認手順です。
6:07まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
6:15次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
6:21スタイルズで宣言が無効になっていないか、フレックスの一括指定など別の宣言に上書きされていないかも重要です。
6:30コンピューテッドで、フレックス・ベイシスの最終的な値を確認し、親の表示方式がフレックスになっているか、
6:36並びの方向が意図どおりかも調べましょう。
6:42最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容がはみ出さずに利用できるかを確かめてください。
6:51最後に互換性とまとめです。
6:52フレックス・ベイシスは、クローム、エッジ、ファイアフォックス、サファリなど、
6:57現在の主要ブラウザーで広く対応しています。
7:01記事では、クロームは29以降、エッジは12以降、サファリは9以降などの記録が紹介されています。
7:07練習は、まず12レムと6レムの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて、
7:12結果がどう変わるかを比べることです。
7:16複数の指定を一度に変えず、一つずつ確かめると理解が早まります。
7:20まとめます。
7:21フレックス・ベイシスは、主軸方向の伸縮前の基準サイズで、初期値はオート、
7:24継承はしません。
7:27関連するフレックス、フレックス・グロウ、フレックス・シュリンクもあわせて確認すると理解が深まります。
7:34お疲れさまでした。

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

この動画で学べること

flex-basisの役割と主な指定値を解説。伸縮前の基準を変え、項目の幅の配分を比べます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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