flex布局 元素被挤压（点文一排，点被挤压）

flex布局 元素被挤压（点文一排，点被挤压）

原因是 flex布局，元素 默认的flex-shrink 为 1 ，即空间不够时，按比例缩放。另一个值是 0 即不缩放

 

 

html代码

<div className='rule-dot'>
          <span className='rule-dot-span'></span>
          <WidthSpace width={9} />
          <span className='rule-justify'>正心喜事、正心大事记、员工生日（获得正心币：点评1个，点赞0.5个）</span>
</div>

<div className='rule-dot'>
          <span className='rule-dot-span'></span>
          <WidthSpace width={9} />
          <span className='rule-justify'>研报和其他工作报告（点评：3个）</span>
 </div>

css代码

 .rule-dot {
    display: flex;

    .rule-justify {
      text-align: justify;

      font-size: 14px;
    }

    .rule-dot-span {
      position: relative;
      top: 6px;
      display: inline-block;
      width: 8px;
      height: 8px;
      background-color: #DDDDDD;
      border-radius: 8px;
    }
  }

解决方案有两种

（1）给 点 span外面加个父容器 

<div>
    <span className='rule-dot-span'></span>

</div>
(2)给 点 span设置 flex-shrink: 0;

<span className='rule-dot-span' style={{flex-shrink: 0}}></span>