flex布局的几个属性

flex-grow

当 flex 容器内的子元素总宽度小于容器宽度时，flex-grow 属性指定每个子元素相对于其他元素的扩展比例。

flex-shrink

当 flex 容器内的子元素总宽度大于容器宽度时，flex-shrink 属性指定每个元素相对于其他元素的收缩比例。

这个属性接受一个非负数字作为参数，默认为1。当设置为0时，该元素不会自动收缩，当设置大于0的值(n)时，则会按照 n 比 1 的比例收缩多余的空间。

flex-basis

用于指定 flex 子元素在主轴上的初始尺寸或基准宽度。当设置 flex-basis 属性时，子元素的大小将会受到它的值的影响。

当子元素没有被分配具体的宽度时，flex 容器将默认按照基准宽度平均分配容器的可用空间。例如，如果有4个子元素，在没有特别指定宽度的情况下，每个子元素将被分配容器宽度的四分之一作为其默认宽度。

当容器的尺寸大于或小于子元素的基准宽度时，将按照比例对各个元素进行缩放。

需要注意的是，基准宽度仅在没有为子元素指定具体宽度时起作用。如果为某个子元素明确指定了宽度，则该宽度将取代基准宽度。