柔性箱物品不是空間均勻

Question

我試圖通過將flex-grow屬性設置爲1來使柔性箱容器中的物品均勻間隔，但它沒有任何影響。項目的列在被包裝之前根據最寬的尺寸來確定尺寸。在所有物品之間均勻分配空間的正確方法是什麼？

.flex-box { 
    display: flex; 
    flex-flow: column wrap; 
    .flex-item { 
     flex: 1 0 auto; 
    } 
} 

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <div class="flex-box"> 
     <div class="flex-item" ng-repeat="campaign in mvm.regionCampaigns.results | orderBy:'name' track by campaign.id"> 
     <input id="audit-{{ mvm.title }}-{{ campaign.id }}" checklist-model="mvm.selectedFilters['campaign_id']" checklist-value="campaign.id" type="checkbox" ng-click="mvm.setRegionSelectAll()" ng-change="mvm.clearSearchMatch('campaign_id', campaign.id, checked)"> 
     <label for="audit-{{ mvm.title }}-{{ campaign.id }}" class="pull-left checkbox-label"></label> 
     <span tooltip-placement="top" uib-tooltip="{{campaign.name}}">{{ campaign.name | limitTo:17 }}{{campaign.name.length > 17 ? '...' : ''}}</span> 
     </div> 
    </div> 
    </div> 
</div> 

如何獲得所有類flex-item的容器均勻間隔，所以列都是相同的寬度？

Answer 1

如果你想有寬度相等，那麼你需要deine每個元素flex-grow:1。或者元素之間只需要空格，那麼對父div來說只有justify-content: space-between;就足夠了。情況1如果相等寬度不需要

.flex-item{ 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.flex-item input, .flex-item label, .flex-item span {flex-grow:1}

<div class="flex-box"> 
 
     <div class="flex-item" ng-repeat="campaign in mvm.regionCampaigns.results | orderBy:'name' track by campaign.id"> 
 
     <input type="checkbox"> 
 
     <label>test</label> 
 
     <span>test</span> 
 
     </div> 
 
    </div>

希望這對您有所幫助：你不需要定義彎曲生長。