flex布局之flex-wrap属性详解

介绍

在设置display: flex的容器中，其中的子元素默认是不换行的，当其子元素的总宽度大于容器的宽度时，其会将子元素的宽度挤压，即得不到我们想要的宽度。而flex-wrap则可以将容器设置为是否可换行，其中常用的值有如下所示：

1、nowrap（默认值）
nowrap即不换行，其子元素的中宽度大于容器的宽度时，子元素的宽度会被挤压变小，代码如下图所示：

<scroll-view scroll-y="true" enable-flex="true" style="height:80%; display:flex; flex-wrap: wrap;">


        <view class="chilren"></view>

        <view class="chilren"></view>

        <view class="chilren"></view>

        <view class="chilren"></view>

        <view class="chilren"></view>

        <view class="chilren"></view>


 </scroll-view>

.chilren {
  margin-top: 2%;
  margin-left: 2%;
  width: 47%;
  height: 350rpx;
  background: blue;
}

效果如下图所示：

2、wrap
即换行，其子元素的宽度不会被挤压变小，，代码如下图所示：

<scroll-view scroll-y="true" enable-flex="true" style="height:80%; display:flex; ">


        <view class="chilren"></view>

        <view class="chilren"></view>

        <view class="chilren"></view>

        <view class="chilren"></view>

        <view class="chilren"></view>

        <view class="chilren"></view>


 </scroll-view>

.chilren {
  margin-top: 2%;
  margin-left: 2%;
  width: 47%;
  height: 350rpx;
  background: blue;
}

效果如下图所示：