flex-basis、flexについて〜flexプロパティ後編。

扨（さて）後半戦。

こんにちは、「ふ」です。
前編ではflexプロパティのうち、flex-growとflex-shrinkについて紹介しました。

flex-grow,flex-shrinkについて〜flexプロパティ前編。

後編ではflex-basisと、一括指定のflexについて触れたいと思います。前編の内容もふまえて説明していきますので、よろしければ前編⬆︎もご覧ください。

〜本編に行くまえに前編にて使用したHTML、CSS、そしてflexプロパティの初期値をおさらいしておきます。

〜では行ってみましょう。

flex-basis。

flex-basisプロパティは、flexbox内に配置する子要素の基準幅を指定します。値は以下の通り。

では初期値から試してみます。これに関しては親要素を

とすれば内部的に自動で「auto」が指定されます。

初期値「auto」は親要素のサイズから子要素の幅を自動的に算出してbox内に収めてくれます。

次。相対値で指定してみましょう。

相対値でも指定できました。

これはwidth?

ここまで見てきて、「widthと一緒やん！」と思う方もいるでしょう。でもちょっと違います。
親要素の主軸を縦方向に指定してみます。

そうすると、flex-basisは縦方向の基準幅として機能します。見た目はheightを指定しているように見えますね。
そうです。CSSにおいて、「width」はあくまで「水平方向の幅」を指定するのに対し、flex-basisプロパティはflexboxの「主軸に対しての幅」を指定します。見た目の方向は主軸方向に基づきます。

あと、絶対値でも指定してみましょう。

指定したpx値のまんま、box内に表示されました。

ところで。

ここで親要素の幅を半分にしてみましょう。

先ほどの青300px、橙500pxだと親要素からはみ出して表示されるはずです。ところが・・

子要素も一緒に縮んでbox内に収まってしまいました。なぜでしょうか。




これは、親要素にflexboxを設定した段階で

shrinkプロパティの初期値が内部的に指定されてしまうためです。親要素の幅が狭くなると、それに合わせて子要素も1：1の比率で縮んでしまっているのでした。

これを回避するために、flex-shrinkも改めて指定してみます。

こんどは縮まずに表示されました。

flexプロパティを設定する際は各プロパティ同士の影響にも配慮するようにしましょう。

最後、flex。

最後にflexプロパティを紹介します。これは、flex-grow、flex-shrink、flex-basisを一括で指定するショートハンドです。

「ショートハンド」？

〜CSSを書いている方なら、他のプロパティでもう使っていることだと思います。例えば「margin」なら、

このように関連するプロパティを一括で指定するモノですね。

扨（さて）このflexプロパティ、具体的な値を記述するにはスペースを空けて「grow」「shrink」「basis」の順に指定します。

こう書いた場合の各プロパティは以下のように設定されます。

然し乍らこのプロパティは具体的な数値よりも、キーワードを使ってその値を指定するケースが多いかと思われます。
子要素の幅指定をflex-basisではなくwidthで指定したものを用意して、その挙動をみていきましょう。

２つの子要素にまとめて指定できるよう、「.parent > div」の場所も作っておきました。この中にflexプロパティを記述するとします。

◼︎ 初期値

これは、

と同じ意味を持ちます。

growが「0」なので親要素に余白があっても埋めようとはしません。親要素からはみ出した場合にはshrink「1」が適用され、その分を子要素が平等に負担して縮みます。
flex-basisは「auto」ですが、widthのほうが優先される模様。

◼︎ 自動

これは、

となります。

親要素の伸縮に合わせて子要素が伸び/縮みしてくれます。従順なヤツですね。

◼︎ なし

これは

になります。

今度は親要素のサイズに全く対応してくれなくなりました。「我が道をゆく」タイプ。

「モヤ」は取れましたか？

難解なflexプロパティ、前/後編にわたって紹介させていただきました。読んでくださった方、ありがとうございます ♪

拙い解説でしたが、皆さんの「モヤモヤ」は解消されたでしょうか？　だとしたら幸いです。flexboxはとても便利なものですが、これらのflexプロパティをちゃんと理解しておけば、さらに表現の幅が広がることでしょう！