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

我在使用彈性盒子布局的時候遇到一個問題，我有10個元素，想分成兩行顯示。但是我不想固定每個元素的寬度，我的代碼如下，該如何修改呢。

<div class="mall-sell item-box">                
        <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 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>

css代碼如下：

.mall-sell {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex: 1;
    flex-wrap: wrap;    
    position: relative;
}
.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;
}

我現(xiàn)在是第一行顯示7個，第二行顯示剩余三個，不知道該怎么改。
謝謝

回答

編輯回答

互擼娃

將元素樣式的flex相關屬性修改一下：

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

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

2018年7月5日 06:46

編輯回答

執(zhí)念

放在兩個大div里面可以嗎

2017年6月6日 05:17

編輯回答

貓小柒

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

<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;
}

2018年5月2日 19:36