Flexbox 中的 grow, shrink 與 basis

• 默認值為 flex-grow:0, flex-shrink:1, flex-basis:auto

• 意味著默認情況下如果旁邊有某個元素太長，是有可能把其它的都擠沒掉的……
• 這三個值可以分別定義或是直接用 flex 屬性一起定義

• none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
• 值為 none 時即是 0 0 auto，大概就是不拉伸也不壓縮寬度自動
• Flex-basis 是基礎值, 定義了節點本身希望渲染的長度

• Flex-grow 定義了節點拉伸時的表現

• 只在容器大於所有節點希望渲染的總值時作用
• 其數值定義了各節點拉伸的比例
• Flex-shrink 定義了節點空間不夠必須壓縮時的表現

• 只在容器小於所有節點希望渲染的總值時作用
• 其數值定義了各節點壓縮的比例

附：具體寫的測試頁面。BTW, 用 create-react-app 來寫些純前端的實驗頁面挺方便的。