12 flex布局

很多时候我们会用到 flex: 1 ，它具体包含了以下的意思

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