Flexboxでレイアウトを作成する時に覚えておきたい、子要素がどのようにサイズ変更されるかアニメーションで解説
Post on:2017年3月3日
sponsors
普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex（収縮する）の名の通り、収縮してサイズ変更できることが大きな特徴です。
Flexboxを使ってレイアウトを作成する時に役立つ、Flexboxのプロパティがどのように収縮して機能するかアニメーションで分かりやすく解説します。
Even more about how Flexbox works — explained in big, colorful, animated gifs
前編（翻訳版: Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説）では、主にコンテナ要素に適用されるプロパティを解説しました。今回は子要素に適用されるサイズ変更のプロパティについて解説します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- flexアイテムのベースになるサイズを指定「flex-basis」
- flexアイテムをどれくらい拡大させるか「flex-grow」
- flexアイテムをどれくらい縮小させるか「flex-shrink」
- サイズ、拡大縮小を定義する「flex」
- 最後に
flexアイテムのベースになるサイズを指定「flex-basis」
最初のプロパティは、Flexboxで最もよく使用されるプロパティの1つです。
「flex-basis」は、他のFlexboxのプロパティ（後で詳しく説明します）によって操作される前に、要素のデフォルトサイズを制御します。下記のアニメーションで、「flex-basis」はwidthプロパティと互換性があることが分かります。
「flex-basis」と「width」プロパティの互換性
「flex-basis」と「width」の違いは何でしょうか？
「flex-basis」は、flexコンテナの主軸の方向に相当するということです。
flexコンテナの主軸（Main）と交差軸（Cross）
「flex-basis」は、主軸によってエレメントのサイズに影響を与えます。
「flex-basis」の値が同じ状態で、主軸の方向を切り替えるとどうなるか見てみましょう。
「flex-basis」の値は同じ、主軸の方向を変更
「flex-basis」は「flex-direction」で定義した主軸の方向に依存して、幅または高さを決定させます。「width」は幅の指定で、高さを変更する時は「height」を手作業で指定しなければなりません。
参考
- flexコンテナの主軸の方向「flex-direction」 -Flexboxをアニメーションで分かりやすく解説
- flexboxコンテナ: flex-direction -Flexboxの各プロパティの使い方を詳しく解説
- flexboxアイテム: flex-basis -Flexboxの各プロパティの使い方を詳しく解説
flexアイテムをどれくらい拡大させるか「flex-grow」
今度はもう少し複雑かもしれません。
最初に、すべての正方形を同じ幅（120px）に設定します。
同じ幅の正方形を並べただけ
「flex-grow」プロパティのデフォルト値は0です。つまり、正方形はコンテナ内のスペースを占めるようにすることはできません。
このことは何を意味しているでしょうか？
すべての正方形に対して「flex-grow」を1に増やしてみます。
「flex-grow」に1を指定
正方形（ではなくなりましたが）はコンテナの全幅を占め、その間のスペースは均等になります。「flex-grow」の値は「width」を上書きします。
「flex-grow」で混乱する原因は、その値です。
「flex-grow」とは何でしょうか？ 1とは何を意味しているのでしょうか？
正方形の「flex-grow」を999にすると、下記のように表示されます。
「flex-grow」に999を指定
「flex-grow」に1を指定した時とまったく同じです。
なぜなら「flex-grow」は絶対値ではないからです、「flex-grow」は相対値です。
重要なことは、正方形の「flex-grow」値はそれ自体ではなく、他の正方形との関係です。
すべての正方形を「flex-grow: 1」にし、３番目の正方形のみ値を変更してみます。
３番目の正方形のみ値を変更
上記の指定で何が起こっているのかを本当に理解するために、簡単な数式で説明します。
まず、それぞれの正方形は1の「flex-grow」でスタートします。この時点で、各正方形の「flex-grow」を合計すると、6です。その結果、コンテナは6つの別々のセクションに分割され、各正方形はコンテナ内の利用可能なスペースの1/6を占めます。
３番目の正方形の「flex-grow」を2にすると、「flex-grow」プロパティの合計は1 + 1 + 2 + 1 + 1 + 1になり、コンテナは7つのセクションに分割されます。
正方形のサイズは、3番目が2/7になり、残りの5つはそれぞれ1/7を占めます。
3にすると、1 + 1 + 3 + 1 + 1 + 1になり、3番目の正方形は3/8を占めます。
「flex-grow」は、割合についての相対値です。
すべての正方形に「flex-grow: 4;」、3番目の正方形に「flex-grow: 12;」を指定しても、1, 3で指定したのと同じ表示になります。
すべてに4と3番目に12を指定しても、すべてに1と3番目に3と同じ
重要なことは、各正方形の「flex-grow」は大きさについて、ということです。
最後の注意として、「flex-basis」のように「flex-grow」も主軸全体に適用されます。「flex-direction」で列に設定しない限り、正方形は幅方向にのみ成長します。
参考
- flexboxアイテム: flex-grow -Flexboxの各プロパティの使い方を詳しく解説
flexアイテムをどれくらい縮小させるか「flex-shrink」
「flex-shrink」は「flex-grow」とは反対に、正方形がどれくらい縮むことができるかを決定します。
※正方形は縮小すると、正方形ではありませんが、正方形の表記にしています。
要素がコンテナに収まるように縮む必要がある場合、つまりコンテナが小さすぎる場合にのみ発生します。
「flex-shrink」の主な用途は、縮小したいアイテムとそうでないアイテムを明示することです。デフォルトでは、すべての正方形に1の「flex-shrink」があり、コンテナが収縮するにつれて縮小します。
どのような挙動になるか見てみましょう。
下記では各正方形は「flex-shrink: 1;」で、コンテナが収縮するにつれてアイテムも縮小します。
「flex-shrink」に1を指定
今度は、3番目の正方形のみ「flex-shrink: 0;」を指定してみます。
3番目の正方形は縮小することは禁止されているため、コンテナのサイズを変更しても幅は変化しません。
３番目の正方形のみ0を指定
「flex-shrink」のデフォルト値は、1です。これは要素がそうでないと指定するまで収縮することを意味します。
そして、「flex-shrink」も大きさについて、ということです。1つの矩形が「flex-shrink: 6;」で、残りが「flex-shrink: 2;」の場合、1つの矩形は残りの3倍の速さで縮小されます。これは幅の1/3に縮小されることを意味しません。
参考
- flexboxアイテム: flex-shrink -Flexboxの各プロパティの使い方を詳しく解説
サイズ、拡大縮小を定義する「flex」
「flex」はサイズ、拡大縮小を定義するgrow, shrink, basisをまとめて指定できるショートハンドです。
デフォルトは0（grow）、1（shrink）、auto（basis）になっています。
最後の例では、2つの矩形を使って説明します。まずはそれらのプロパティです。
|
1 2 3 4 5 6 |
.square#one { flex: 2 1 300px; } .square#two { flex: 1 2 300px; } |
「flex-basis」は2つとも同じ値です。つまり、十分なスペースがあれば（コンテナは600pxと余白とパディングの余裕があります）、どちらも幅が300pxになります。
しかし、コンテナが大きくなるにつれて、「.square#one」（flex-grow :2）は2倍の速さで広がります。逆に、コンテナが縮むにつれて、「.square#two」（flex-shrink :2）は2倍の速さで縮小します。
実際の動きをアニメーションで見てみましょう。
flex-growとflex-shrinkの値が異なる２つの矩形
アイテムはどのように広がり、縮むのか
紛らわしいかもしれないことがあります。「.square#one」が広がる時に、「.square#two」の2倍のサイズには広がりません。同様に縮む時も1/2のサイズに縮むのではありません。
それぞれの値で指定した「2 1」、「1 2」はサイズではありません。広がる時と縮む時の率です。
ちょっと数学の時間
コンテナの開始サイズは640pxです。コンテナの両側にはpaddingが20pxあり、残りは600pxなので、2つの矩形は300pxの十分なスペースがあります。
コンテナを430pxにすると、210pxのスペースが失われます。
その結果、「.square#one」（flex-shrink :1）は70pxを失われ、「.square#two」（flex-shrink :2）は140pxを失われます。
コンテナを340pxにすると、300pxのスペースが失われます。
その結果、「.square#one」（flex-shrink :1）は100pxを失われ、「.square#two」（flex-shrink :2）は200pxを失われます。
失われたスペースは、それぞれの「flex-shrink」（2対1）の比率に従って分割されます。
「flex-grow」も同じです。
コンテナを940pxにすると、300pxのスペースを得て、「.square#one」（flex-grow :2）は200px、「.square#two」（flex-grow :1）は100pxのスペースを得ます。
flexプロパティは、大きさが肝心な点である、ということです。
上記のアニメーションでは、比率に応じて幅がどのように調整されるかを見ることができます。デルタ（Δ）は「flex-basis」との違いを示しています。
参考
- flexboxアイテム: flex -Flexboxの各プロパティの使い方を詳しく解説
最後に
最後に要点として、「flex-basis」は拡大または縮小する前に要素が主軸に沿ってどれだけ大きくなるかを定義します。「flex-grow」は兄弟要素に比例してどれだけ拡大するかを決定し、「flex-shrink」はどれだけ縮小するかを決定します。
Flexboxの更に詳しい解説は、下記ページを参考にしてください。
sponsors
