前端样式布局自适应小结

一般用来搭建布局使用的块元素是 div ，但你可以使用内联元素（例如，span 等）通过设置 display: inline-block 将其改为内联-块元素用来搭建布局。同样块元素也能修改为内联-块元素用于做布局。块元素一般是一个元素占据一行，不论是否设置 width 都是占据一行。内联元素则是按照内容决定宽度。内联-块元素则可以按照设置的 width 调整元素在单行占宽情况。也就是一行可以放多个内联-块元素、内联元素，一行可以放一个块元素。

两个元素（一个元素宽度固定，一个元素自适应）

    .parent {
	display: flex;
	border: 1px solid;
	width: 400px;
}
.parent2{
	border: 1px solid;
	width: 400px;
}
span {
  display: inline-block;
    margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 5px;
	border: 1px solid;
}
.span_fixed {
  width: 37px;
	vertical-align: middle;
}
.span_flex2{
  width: calc(100% - 60px);
         overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}
.span_flex {
	display: inline-block;
	flex: 1,
	--webkit-box-flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

<div class="parent">
  <span class="span_fixed">fixed</span>
  <span class="span_flex">span_flexspan_flexspan_flexspan_flex</span>
</div>
<div class="parent2">
  <span class="span_fixed">fixed</span>
  <span class="span_flex2">span_flexspan_flexspan_flexspan_flexspan_flexspan_flexspan_flexspan_flexspan_flex</span>
</div>

三个元素（一个元素宽度固定，一个元素宽度不固定，一个元素自适应）

.parent {
	display: flex;
	border: 1px solid;
	width: 400px;
}
span {
  display: inline-block;
    margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 5px;
	border: 1px solid;
}
.span_fixed {
  width: 37px;
}
.span_flex {
	display: inline-block;
	flex: 1,
	--webkit-box-flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

<div class="parent">
  <span class="span_fixed">fixed</span>
  <span class="span_active">span_activespan_active</span>
  <span class="span_flex">span_flexspan_flexspan_flexspan_flex</span>
</div>