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

使用了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;的样式达不到这个效果，他依然没有换行.

根据您提供的代码，我注意到您的 .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。

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

            </view>

改成这样嵌套

布局问题吧，你这样改一下试试：

该回答引用GPTᴼᴾᴱᴺᴬᴵ,具体如下：

根据您提供的代码，您将 flex-wrap: wrap; 应用于 .girlLastFloorArea 类，但是这个类的父元素是 .girlFloorArea。因此，如果您希望子元素在 .girlFloorArea 中换行，您需要将 flex-wrap: wrap; 应用于 .girlFloorArea 而不是 .girlLastFloorArea。

请将 .girlFloorArea 的 flex-wrap 属性取消注释并尝试一下：

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

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

这应该可以让您的子元素在 .girlFloorArea 中正确地换行。

如果以上回答对您有所帮助，望采纳～谢谢

看你的子项有没有给宽，这种情况子项必须有宽才可以换行