【css】flex:1一个神奇的存在

随着显示器的分辨率越来越高，响应式布局逐渐变成了基本需求。
有些需求，会要求部分内容宽度固定，另一部分内容需要宽度自适应。
之前在项目中，常常会使用 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);
}

欢迎分享交流其他更好的方法😀~