使用了flex-wrap: wrap;之后子项依然不换行

Question

使用了flex-wrap: wrap;之后子项依然不换行;
代码:

<view class="girlFloorArea">
                <view class="girlFirstFloorArea">
                    <image class="girlFirstFloorItemImg" :src="floorList[0].product_list[0].image_src"
                        :style="{width: floorList[0].product_list[0].image_width + 'rpx'}" mode="widthFix">
                    </image>
                </view>
                <view class="girlLastFloorArea" v-for="(item,index) in floorList[0].product_list" :key="index">
                    <image class="girlLastFloorItemImg" v-show="index!==0" :src="item.image_src"
                        :style="{width: item.image_width + 'rpx'}" mode="widthFix">
                    </image>
                </view>
            </view>

.girlFloorArea{
        display: flex;
        // flex-wrap: wrap;
        padding-left: 10rpx;
    }

    .girlLastFloorArea {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

在class为girlLastFloorArea 设置了flex-wrap: wrap;的样式，但是结果还是没有换行。

如果给class为girlFloorArea加上flex-wrap: wrap;的结果就是

这是我想要的效果：

但是为什么给girlLastFloorArea 设置了flex-wrap: wrap;的样式达不到这个效果，他依然没有换行.

Answer 1

根据您提供的代码，我注意到您的 .girlFloorArea 的 CSS 样式中没有开启 flex-wrap 属性，而 .girlLastFloorArea 中已经开启了 flex-wrap 属性。因此，您需要在 .girlFloorArea 中开启 flex-wrap 属性，以使得子项可以在必要时换行。请将 .girlFloorArea 样式中的注释去掉，将 flex-wrap 属性开启即可：

.girlFloorArea{
    display: flex;
    flex-wrap: wrap; // 开启 flex-wrap 属性
    padding-left: 10rpx;
}

另外，您在 .girlLastFloorArea 样式中设置了 justify-content: space-around; 属性，这会在子项之间添加间距，但是也可能会导致最后一行子项的对齐方式不一致。如果您希望所有子项在同一行内对齐，可以将 justify-content 属性设置为 flex-start 或 center。