実務でflexをちょこちょこ使うようになりました。
やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・
んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関して。
別々に書いてもいいんですが、一緒に書いた方がスマートでしょう。
大事なことはwidthを設定するプロパティだということ。
以下下記 URLを参考に。
https://github.com/umanari145/css/flex/flex2
flex-basicに関して
そのカラムが持っている基本の幅です。基本的にはこの幅を元に計算します。
ちなみにautoだと内包する要素に依存することになります。0でも中が潰れることはないようです。
flex-growに関して
余白が会った時にその分配比率です。なので余白がない時には意味がありません。
余白があっても0だと余白が分配されず、basisの値のままになります。
詳細な計算式はソースやリンクなどを参照。つっても簡単で単純に比率で分配するだけです。
flex-shrinkに関して
こちらは親要素に対して幅が足りない時の縮む割合です。なので子要素の幅が親要素を超過していないと、意味がありません。
growと違い計算方法がかなり複雑だと思われます。子要素の幅がまちまちなので通常の割合で縮むと幅が広いブロックの方が不利になるからです。
子要素が同じ幅だったり、違っていても伸縮率が1:1なら楽なんですけどね・・・
詳細な計算方法はネットを探しても出てきませんでした。要調査です。
参考リンク
大変わかりやすいです。流行っている技術はこういうのを見つけるのが楽だからありがたいですね・・
