随着显示器的分辨率越来越高,响应式布局逐渐变成了基本需求。
有些需求,会要求部分内容宽度固定,另一部分内容需要宽度自适应。
之前在项目中,常常会使用 css 的计算属性,像是 calc函数
width: calc(100% - 100px);
这个确实也能解决这个问题,但计算宽度的时候还好,计算高度的时候,就需要去算一些数据,会比较麻烦,这个时候,发现了 flex布局中,flex设为1的时候的神奇效果。
当我将左侧内容宽度设置为300,右侧内容flex设置为1,右侧内容的宽度会随着容器的宽度变化而自适应。
在垂直布局的时候同样适用:
无巧不成书啊,刚好又遇到了一个需求,展示客户信息,客户的名称和企业信息要相对自适应:
类似上图这种:
代码贴在下方:
.left p{
display: flex;
padding: 10px;
font-size: 14px;
}
.left p span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.left p span:first-child{
max-width: 200px;
color: #fff;
margin-right: 10px;
}
.left p span:last-child{
flex: 1;
color: rgb(78, 46, 97);
}
欢迎分享交流其他更好的方法😀~