44.フレックスアイテムを知る③　～flex-basis、アイテム毎に横幅を指定～

本日はflex-basisについて掘り下げて行きたいと思います。

昨日までのフレックスアイテムのプロパティに関する記事はこちら

42.フレックスアイテムを知る～ボックスとは違うアイテムのプロパティ～ - web制作のしおり

43.フレックスアイテムを知る② ～flex-shrink、縮めて押し込む～ - web制作のしおり

では早速やっていきましょう。

flex-basisとは？

フレックスアイテムに対して、アイテム毎に幅を設定できるプロパティです。

flex-basis : 100px;

のように設定します。

設定されたアイテムはその数値の横幅になります。

pxだけでなく、%での指定も可能です。

また、初期値はautoです。

と、ここまで見てきましたが…

正直widthで良いのでは？と思いました。

何が違うのでしょうか？

幅の指定ならwidthで間に合っている、けど…？

ということで、検証してみることに。

アイテムに設定して、ボックスからのはみ出した時の挙動

限りなく小さい値に設定した時の挙動を確認します。

念の為、flex-shrinkとflex-growはデフォルト条件です。

flex-basisを使ってフレックスアイテムの合計幅がフレックスボックスを超えた場合

フレックスボックス幅300pxに対して、

フレックスアイテム 50px*5、１つだけflex-basisで500pxを指定した場合

それぞれ、20px *5と200pxになりました。

どちらも60％元のサイズより小さくなっています。

(flex-shrinkが全てのアイテムで1の為)

値は同じでflex-basisをwidthに変更した場合でも、

特に変わった動きはありません。

flex-basisを使ってアイテムの内容よりも小さい幅を指定した場合

フレックスアイテムの中身が50px以上ある状態で、

flex-basisで10pxを指定した場合

アイテムの中身を無視して小さくなることはありませんでした。

値は同じでflex-basisをwidthに変更した場合、

アイテムの中身を無視して指定した幅に小さくなりました。

ここはwidthと差がでるようです。

flex-basisとwidthの両方をアイテムに指定した場合

フレックスアイテムに

flex-basis:50pxと

width:100pxを指定すると

アイテムの幅は50pxになりました。

プロパティとしてはflex-basisの値が優先されるようです。

いったいどこが使い所なんでしょうか…？

実は初期値がスゴかった？ flex-basis : auto;

いろいろ試しているうちに、

flex-basisは初期値autoに意味があるのでは

と考えました。

ここで、ブロック要素の挙動についておさらいしておきます。

ブロック要素は幅が指定されていない場合、とりうる最大幅になる。

です。（念の為、divタグで試すと横幅いっぱいに鎮座しました）

そして、フレックスアイテムは「見えないブロック要素に内包されている」でしたね。

つまり、ブロック要素であるフレックスアイテムは

配置直後フレックスボックスの最大値と同じ幅になると考えられます。

１つ配置した時の想定は下図の様な感じ

ですが、実際のところ上図の様にはなりません。

下図が実際の１つアイテムを配置した時の様子です。

flex-basis : autoは内容にフィットした横幅の指定ということのようです。

つまり、親要素にdisplay : flex;と指定するだけで、

勝手に子要素のフレックスアイテムが良い感じの幅に調整される。

ということなのですね。

このflex-basisがあるおかげで、

フレックスボックスの利便性が格段に上昇していたということでしたか。

デフォルト値、大事です。

今日のまとめ

flex-basisはwidthと対して変わらないが、flex-basisが優先される。
flex-basisでアイテムの内容より小さい値を指定しても、内容を無視して小さくなることはない。
flex-basis : autoのおかげで、初期のアイテム幅が良い感じに調整されていた。

何も疑問に思わずにフレックスボックスを使っていましたが、

こうして見ると脱帽ものですね。よく考えられているんですね。

特に今日のブロック要素の性質がらみの幅に関しては、

普通に使っているだけでは気づかなかったと思います。

基礎やデフォルト値は、やはり大事。

使えるだけでなく、何故そうなるのかがわかると対応力をあげられそうです。

では、また。