很多时候我们会用到 flex: 1 ,它具体包含了以下的意思
- flex-grow: 1 :该属性默认为 0 ,如果存在剩余空间,元素也不放大。设置为 1 代表会放大。
- flex-shrink: 1 :该属性默认为 `1 ,如果空间不足,元素缩小。
- flex-basis: 0% :该属性定义在分配多余空间之前,元素占据的主轴空间。浏览器就是根据这个属性来计算是否有多余空间的。默认值为 auto ,即项目本身大小。设置为 0% 之后,因为有 flex-grow 和 flex-shrink 的设置会自动放大或缩小。在做两栏布局时,如果右边的自适应元素 flex-basis 设为auto 的话,其本身大小将会是 0