flex属性是设置flexbox布局中子元素如何在容器中显示的，如flex: 1,即子元素平分容器
flex: 1是 flex-grow、 flex-shrink、 flex-basis的简称
flex-grow, mdn解释
CSS属性 flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。主尺寸是项的宽度或高度，这取决于flex-direction值。
剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。
flex-grow 与其他的flex属性flex-shrink和flex-basis一起使用，通常使用flex 速记来定义，以确保所有的值都被设置。
也就是当前子项目的宽度最多能占容器的剩余宽度的最大值
