flex布局--等分n份

538 阅读1分钟

需求是在某个区域显示3列数据,而且要等分。这个组件用的是多项选择器,内部由多个 checkbox 组成。

例子:

<view style="background-color: pink;width: 100%;">
    <checkbox-group style="display: flex;flex-direction: row;flex-wrap: wrap;">
        <label class="labelTest" v-for="(item,index) in [1,2,3,4,5]" :key="index">
            <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />{{item}}
        </label>				
    </checkbox-group>
</view>

.labelTest{
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0;
    height: 60rpx;
    width: 25%;
}

flex-wrap: wrap;属性很重要,如果设置width:25%,不写这个属性,第5个label就会消失。

效果如图所示:
image.png

将 width: 25%; 改成 flex:1;

效果如下:
image.png