width：max-content 使用

需求背景：

一开始使用 伪类元素  :after、:before，在伪类元素中放入背景图片～中间文字 “放心服务” 定宽，如 1.3rem, 但是移动端手机在适配的过程中，有时候1.3rem 不能满足有些机型，出现以下样式，

所以不能用这种方法，遇到过很多次啦～

改用不脱离文档流的形式，代码如下：

html:

<div class="title">
   <div class="title-before-icon"></div>
   <div class="title-text">放心服务</div>
   <div class="title-after-icon"></div>
</div>

css:

.title {
  display: flex; // 横着排列
  margin: 0 auto; // 横向居中
  width: max-content;
  // 因为margin横向居中必须要设置宽度，但是又无法确定具体宽度，所以宽度就是内容的最大宽度
  width: -webkit-max-content; // 兼容
  width: -moz-max-content; // 兼容
}

.title-before-icon {
  background: url('../../../../assets/common_image/titleLeftLine.png') no-repeat;
  background-size: 100%;
  width: 1.5rem;
  height: 0.5rem;
  display: block;
}

.title-after-icon {
  background: url('../../../../assets/common_image/titleRightLine.png') no-repeat;
  background-size: 100%;
  width: 1.5rem;
  height: 0.5rem;
  display: block;
}

.title-text {
  font-size: 0.32rem;
  color: #FF572F;
  margin: 0 0.1rem; // 文字与两边图片之间的间隔
}

以上all~