flex属性中flex-shrink收缩比例，排版一行挤在一起，宽度失效

做手机页面的时候，用了flex排版布局，布局效果是想要所有内容一行显示，超出内容会滚动横向滚动条显示，然后遇到问题，flex布局的内容的设置了宽度失效了，所有内容会强制一行显示了，但是会挤在一起显示。

效果如下图：

解决办法：

设置flex-basis: 170rpx;flex-shrink: 0;主要是flex-shrink这个属性，意思是收缩比例，如果设置为0，就是不收缩了。

flex-basis: 170rpx;或设置width都可以，设置内容列表的flex-shrink：0，这样就可以正常显示了。

比如实现的效果，下面是css展示：

.tabnav-head {
    display: flex;
    justify-content: space-between;
    line-height: 80rpx;
    font-size: 30rpx;
    height: 80rpx;
    border-bottom: 1px solid #ccc;
    overflow-x: scroll;
    overflow-y: hidden;

    // flex-basis: 172rpx 子容器基准大小 表示在不伸缩的情况下子容器的原始尺寸
    //flex-shrink: 0 收缩比例
    .nav-cell {
        // flex: 1;
        // width: 30%;
        position: relative;
        line-height: 80rpx;
        text-align: center;
        white-space: nowrap;
        flex-basis: 170rpx;
        flex-shrink: 0;
        cursor: pointer;
    
        &.selected::after {
            content: "";
            position: absolute;
            bottom: -2rpx;
            left: 0;
            right: 0;
            z-index: 22;
            width: 60%;
            margin: 0 auto;
            color: #007AFF;
            border-bottom: 3px solid #007AFF;
        }
    }
}

效果：

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/656

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！