当项目里实现自适应布局的时候,使用到了flex弹性布局
比如左边div 400px,右边div 自适应宽度
可以这样实现
.guideContent{ display: flex; } .guideContent .left{ 400px; background: #fff; margin-right: 20px; } .guideContent .right{ background: #fff; flex: 1; }
上面的意思是左边400px , 右边占据剩余所有空间
flex: 1的意思是
flex:1 1 auto 的简写
第一个参数是1 代表等分剩余空间
第二个参数是1 代表如果空间不足。项目比例将缩小
第三个参数是auto 代表项目的本来大小