flex布局排版个数问题

flex布局排版个数问题

1. 当页面display:flex弹性之后 （标签/元素属性个数为定值时）

<view class="particulars-eq-img">
              <view class="particulars-eq-img-con" wx:for='{{singleHouseleases[0].equipment}}' wx:key='index'>
                <image src="{{item.src}}"></image>
                <view>{{item.name}}</view>
              </view>
            </view>

.particulars-eq-img {
display: flex;
justify-content: space-around;		//两端对齐且两边无空隙
//  justify-content: space-between;			//两端对齐  两端占位置
margin-top: 30rpx;
text-align: center;
width: 100%;
flex-wrap: wrap;
font-size: 26rpx;
color: #6B6B6B;
}

使用justify-content: space-between;之后底行元素不占满会出现分散两边情况
使用伪类after 加上宽度即可解决

.pick-container-type-cate1:after {
  content: '';
  width: 280rpx;
}

2. 当页面display:flex弹性之后 （标签/元素属性个数为不定值）

   当页面的排版内容个数为不定值时

display: flex;
margin-top: 30rpx;
text-align: center;
width: 100%;
flex-wrap: wrap;
font-size: 26rpx;
color: #6B6B6B;
}

width: 25%;
margin-bottom: 20rpx;