css属性flex:1代表什么

1. 简单介绍flex布局
flex布局则是一种布局方案，设置父div的css属性display:flex，即可实现flex布局。该父div即为容器，而其内的子元素（如子div）称为项目。
容器和项目各自有不同的css属性，以实现不同的布局效果，
其中容器的主要属性有flex-direction、flex-wrap、flex-flow（前两个属性缩写）、justify-content、align-items等，这里不做展开。
项目的主要属性有order、flex-grow、flex-shrink、flex-basis、flex、align-self等，其中flex为flex-grow、flex-shrink、flex-basis三个属性的缩写。
2.flex-grow、flex-shrink、flex-basis属性介绍
flex-grow：定义项目的的放大比例；默认为0，即使存在剩余空间，也不会放大；为1时，等分剩余空间，自动放大占位；为n时， 占据的空间（放大的比例）是flex-grow为1的n倍。
flex-shrink：定义项目的缩小比例；默认为1，即如果空间不足，该项目将缩小，且缩小比例相同；为0时，空间不足该项目也不会缩小；为n时，空间不足缩小的比例是flex-shrink为1的n倍。
flex-basis： 定义在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目原本大小；设置后项目将占据固定空间。
3. flex:1属性介绍
flex为flex-grow、flex-shrink、flex-basis三个属性的缩写。
flex属性默认值为：0 1 auto （不放大会缩小），常用属性值有none：0 0 auto （不放大也不缩小）、auto：1 1 auto （放大且缩小）。
flex：n（非负数字）代表 flex-grow：n；flex-shrink：1；flex-basis：0%；
flex：n1，n2（两个非负数字）代表flex-grow：n1；flex-shrink：n2； flex-basis：0%；
flex：L（长度或百分比）代表 flex-grow：1；flex-shrink：1；flex-basis：L；
flex：n，L（一个非负数字、一个长度或百分比）代表flex-grow：n；flex-shrink：1；flex-basis：L;
总结：flex-grow和flex-shrink在flex属性中不规定值时则为1，flex-basis为0%。所以flex：1即为flex-grow：1；flex-shrink：1；flex-basis：0%；经常用作自适应布局，内容区会自动放大占满剩余空间。