<div class="car-info">
    <v-blue title_text="" :time_text="other_info.update_time"></v-blue>
    <ul>
        <li v-for="item in detail_info" class="item">
            <div class="text">{{item.text}}</div>
            <div class="value">{{item.value}}</div>
        </li>
    </ul>
</div>

& > .car-info {

    & > ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 30px;
        margin-bottom: 30px;
        & > .item {
            text-align: center;

            & > .text {
                font-size: 10px;
                color: -sharp999999;
                font-family: PingFang-SC-Regular;
            }

            & > .value {
                font-size: 13px;
                color: -sharp333333;
                font-family: PingFang-SC-Medium;
                margin-top: 12px;

            }
        }
    }
}

effect

the spacing of the three columns in the middle of the design is not equal. I think this should not be a fixed padding,. Maybe we should use flex, but it will not work.
or there is a better solution, please give me a hand, thank you.