flex 3行3列布局？

<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: #999999;
                font-family: PingFang-SC-Regular;
            }

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

            }
        }
    }
}

出來的效果

目標效果

設計圖中間的3列間距并不相等，我想這個應該不是固定的padding，也許應該使用flex，可出不來效果.
或者有更好的方案，please give me a hand, thank you.