設置display flex后，設置的寬度無效的解決辦法--flex-shrink

我們在做flex布局的時候經常會遇到這種問題：

父級元素添加display:flex;

子集元素添加width：100px；

但是子集元素寬失效！！！！

css

.flex-box{
            display: flex;
            align-items: center;
            width: 300px;
            height: 50px;
            border: 1px solid black;
        }
        .flex-item{
            width: 100px;
            background-color: gray;
            color:hotpink;
            line-height: 50px;
        }
        p{
            color: red;
            line-height: 50px;
            background-color: gainsboro;
        

HTML

　　<div class="flex-box">
        <div class="flex-item">flex-item</div>
        <p>這里是一段文本。</p>
    </div

 

這是一個很正常的flex布局，就是左邊定寬，右邊自動伸縮

添加文字后，看小效果。

 

現在是自動伸縮了，但是根本不是我們想要的，因為左邊已經被擠沒了。

 

flex-shrink 　　這個屬性默認為1 ，即空間不足會自動縮小，我們只要設置0就可以了。

 

再看下效果。已經沒問題了。