css 中強制換行後，僞類元素變形，用到的flex-shrink 屬性

之前都沒用過這個屬性，最近做項目遇到一個不同屏幕下可能會換行的問題，設置了強制 不換行，但是僞類元素就沒擠沒了，請教了同事，用到了flex-shrink屬性

然後我就去看了看這個屬性的用法，簡單記錄一下

flex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大於容器的時候纔會發生收縮，其收縮的大小是依據 flex-shrink 的值，默認值是1，是根據比例進行收縮，設置的治越大，佔的比例越小，如果設置爲0，則表示不收縮

注意：只有在彈性佈局下才能生效

具體我的實例，錯誤展示成是這樣的

 正確是這樣的

 頁面

<div  class="box">
　　<span ></span> 《我是文本我是文本我是文本我是文本我是文本》
</div>

style:
.box{
disflex:flex;
align-items:center;
white-space:nowrap;
}

span {

      width: 13px;

      height: 13px;

      margin-right: 4px;

      box-sizing: border-box;

      background: #F7F7F7;

      position: relative;

      flex-shrink: 0; //主要的就是加了這個玩意

    }

    span::after{

        content: "";

        position: absolute;

        left: 0;

        top: 0;

        bottom: 0;

        right: 0;

        border: 1px solid #CED0D6;

        border-radius: 50%;

        width: 200%;

        height: 200%;

        transform: scale(0.5);

        transform-origin: left top;

        box-sizing: border-box;

        pointer-events: none;

    }