欢迎来到网页工程c工作坊

欢迎来到网页工程C工作坊！工作坊的主要目的是为大家提供一些有关网页设计及开发等等的热门资讯，希望大家可以将资讯用于自己的作品上，以及能启发大家的创作灵感！

进阶篇 02 及 03 中提到，Flexbox 中的 item 能按自定比率放大及缩小，为了更好地控制 item 大小的变化， 可以为个别 item 加入 flex-basis 设定，给它的大小定一个基本数值。看看以下例子：

item1 有设定 flex-basis: 150px，意思是在无需要放大或缩小的情况下，大小就是 150px（这个例子是宽度）。

将 flex-basis 结合 flex-grow 及 flex-shrink 一同使用时，就可以更好地控制放大缩小的情况。看看以下例子：

item2 的设定为 flex-grow: 2，即是放大比率比 item3 及 item1 多一陪，但因为没有基数设定，结果在这例子的情况下 item2 比 item3 大，但比 item1 小。

由于 flex-grow flex-shrink 及 flex-basis 会经常一起使用，CSS 有一个便捷的写法，就是使用 flex 设定。留意以下不同参数的用法有不同意思：