flex-grow、flex-shrink、flex-basis

目录

flex-basis 

flex-grow

flex-shrink

flex

---

在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。

(注意：这三个属性都是在子元素上设置的，下面讲的是父元素，指以flex布局的元素(display:flex))

快速记住这三个属性：

flex-basis 

首先是 flex-basis，basis英文意思是<主要成分>，所以他和 width 放在一起时,肯定把 width 干掉，basis 遇到 width 时就会说我才是最主要的成分，你是次要成分，所以见到我的时候你要靠边站。

flex-grow

其次是   flex-grow，grow英文意思是<扩大，扩展，增加>,这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，这时，flex-grow就会说我要成长，我要长大，怎么样才能成长呢，当然是分享父元素的空间了。见下面第二个属性的内容

flex-shrink

最后是   flex-shrink， shrink英文意思是<收缩>，这就代表当父元素的宽度小于子元素宽度之和时，并且超出了父元素的宽度，这时，flex-shrink就会说外面的世界太苦了，我还是回到父亲的怀抱中去吧！因此，flex-shrink就会按照一定的比例进行收缩。

flex

flex: 1 1 100px; // 依次是 flex-grow flex-shrink flex-basis

flex: 1; 表示的是 flex-grow：1 flex-shrink：1 flex-basis：0%。