flex布局?

Question

<view class="legend">
    <view class="legend-item">
        <view class="item">
            <p class="text">企业家坐谈会</p>
        </view>
    </view>
    <view class="legend-item">
        <view class="item">
            <p class="text">联系员走访问</p>
        </view>
    </view>
    <view class="legend-item">
        <view class="item">
            <p class="text">企业发起</p>
        </view>
    </view>
    <view class="legend-item">
        <view class="item">
            <p class="text">协调会</p>
        </view>
    </view>
    <view class="legend-item">
        <view class="item">
            <p class="text">其它</p>
        </view>
    </view>
</view>

.legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    border:1px solid red
}
.legend-item {
display: flex;
margin:0 10px 10px 10px;

}
.icon-ring {
    background: #AAAAAA;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin:5px 10rpx 0 0;
}
.text {
    font-weight: 500;
    font-size: 28rpx;
    color: #1D2129;
}

这种不能加宽度的自适应 超过就换到下一行
我想让其它对应到上面的联系员走访问这个应该怎么排

Answer 1

可以试一试老大哥 grid 布局。

.legend {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 300px;
    border:1px solid red;
}
.legend-item {
  display: flex;
}

Answer 2

学习大佬思路

https://www.zhangxinxu.com/wo...