flex小记

前言

应产品要求实现以下效果

首先想到的使flex布局，flex默认有三个属性，分别为flex-grow, flex-shrink 和 flex-basis

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。

我们只需要把左边元素的flex-grow设置成比右边的小，然后再把flex-basis设置成比右边的大就可以了。

效果链接

参考

Flex 布局教程