深入理解css3中的flex-grow、flex-shrink、flex-basis （转）

在CSS3中，flexbox布局是一种非常强大的布局方式，可以通过一些属性来实现弹性伸缩和对齐。其中，flex-grow、flex-shrink、flex-basis就是控制弹性伸缩的重要属性。

flex-grow 属性

flex-grow 属性用于指定元素在弹性容器中的伸展比率，即当元素所在容器有剩余空间时，元素按照比例分配剩余空间。默认值为 0，即当剩余空间不足时，元素不会伸展。

例如，当一个容器中有两个元素，一个 flex-grow 值为 1，另一个为 2，则第二个元素在容器有剩余空间时会比第一个元素多分配一倍的剩余空间。

flex-shrink 属性

flex-shrink 属性用于指定元素在弹性容器中的收缩比率，即当元素所在容器空间不足时，元素按照比例收缩。默认值为 1，即元素会自动收缩。

例如，当一个容器中有两个元素，一个 flex-shrink 值为 1，另一个为 2，则第二个元素在容器空间不足时会比第一个元素多收缩一倍。

非常重要的一点是，如果所有元素的 flex-shrink 属性值都为 0，则它们不会收缩。

flex-basis 属性

flex-basis 属性用于指定元素在弹性容器中的基准值，即元素在不伸展或收缩的情况下所占据的空间。默认值为 auto，即元素的大小由其本身的大小决定。

例如，当一个容器中有两个元素，一个 flex-basis 值为 100px，另一个为 200px，则第一个元素在不伸展或收缩的情况下会占据 100px 的空间。

综合运用

这三个属性通常一起使用，例如：

flex: 1 0 auto;

这个属性的意思是元素在弹性容器中会按照 flex-grow 属性的比例伸展，但不会收缩，基准值由 flex-basis 决定。

总结

flex-grow、flex-shrink、flex-basis 这三个属性是控制 flexbox 布局中弹性伸缩的重要属性，非常方便实用。熟练掌握它们的使用可以让我们更好地控制弹性布局，实现更加灵活的网页布局。