css中使用flex布局讓10個(gè)元素分兩行顯示的問題

將元素樣式的flex相關(guān)屬性修改一下：

.mall-sell {
    // 添加justify-content屬性
    justify-content: space-between 或 space-around;
}
.mall-sell .mall_sell-item {        
    // flex: 1;
    flex: 0 0 18%;
}

此處，flex值中的"18%"我只是給個(gè)大概，你可以使用任何小于20%的值，調(diào)試最佳樣式。

放在兩個(gè)大div里面可以嗎

這種情況下只能把十個(gè)item放在兩個(gè)div里了，然后再給div設(shè)置flex-basis:100%;分成兩個(gè)

<div class="mall-sell item-box">                
  <div class="item-box-1">
      <div class="mall_sell-item">
          <img src="sell_img.jpd">
          <p>Hello</p>
      </div>
      <div class="mall_sell-item">
          <img src="sell_img.jpd">
          <p>Hello</p>
      </div>    
      <div class="mall_sell-item">
          <img src="sell_img.jpd">
          <p>Hello</p>
      </div>    
      <div class="mall_sell-item">
          <img src="sell_img.jpd">
          <p>Hello</p>
      </div>    
      <div class="mall_sell-item">
          <img src="sell_img.jpd">
          <p>Hello</p>
      </div>
  </div> 
  <div class="item-box-1">
      <div class="mall_sell-item">
          <img src="sell_img.jpd">
          <p>Hello</p>
      </div>
      <div class="mall_sell-item">
          <img src="sell_img.jpd">
          <p>Hello</p>
      </div>    
      <div class="mall_sell-item">
          <img src="sell_img.jpd">
          <p>Hello</p>
      </div>    
      <div class="mall_sell-item">
          <img src="sell_img.jpd">
          <p>Hello</p>
      </div>    
      <div class="mall_sell-item">
          <img src="sell_img.jpd">
          <p>Hello</p>
      </div>
  </div>                                   
</div>

.mall-sell {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex: 1;
    flex-wrap: wrap;    
    position: relative;
}

.item-box-1{
  flex-basis:100%;
  display: flex;
}


.mall-sell .mall_sell-item {        
    flex: 1;
    float: left;
    position: relative;
    height: 1.68rem;
    line-height: 1.68rem;
    text-align: center;
    vertical-align: middle;
    margin-top: 0.266666rem;
}
.mall-sell .mall_sell-item img {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 0.146666rem;
    text-align: center;
    background-color: rgb(210,216,221);
}
.mall-sell .mall_sell-item p {
    float: right;
    width: 1.36rem;
    height: 0.333333rem;
    line-height: 0.333333rem;
    font-family: PingFang-SC-Regular;
    @include font-dpr(13px);
    font-size: 0.346666rem;
    text-align: center;
}