在项目开发过程中,遇到了让页面按比例适应大小的问题,然后采用了flex布局方式。Flex 是 Flexible Box 的缩写,意为"弹性布局",我将它与网格布局结合。
flex: 1=== flex: 1 1 0。flex: 1是flex-grow = 1(定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大,我这里设置为1), flex-shrink(定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小,我这里设置为1)和flex-basis(给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小,我这里设置为0)的简写。flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]。如果不修改,则默认值为0 1 auto,后两个属性可选。
.info-row {
display: flex;
padding: 0 5px;
margin-top: 10px;
.info-col {
height: 85px;
flex: 1;
background-color: #fff;
border-radius: 8px;
margin: 0 5px;
}
}