flex 3行3列布局？

Question

<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.

Answer 1

使用flex布局，横向排列，允许换行，高度一致，每一块占据33.33%的宽度

Answer 2

给.item设置个width:33.33%;

Answer 3

是啊 width:33.33% ....

Answer 4

父元素设置display: flex
子元素设置flex: auto