フレックスボックスのアイテムが均等にスペースにならない

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> 

は、どのように私はクラスのフレックス項目を持つすべてのコンテナが均等に配置されるように得るか、その列はすべて同じ幅ですか？

Answer 1

あなたが同じ幅を持つようにしたいなら、あなたは、各要素flex-grow:1をdeineする必要があります。要素間にスペースが必要な場合は、justify-content: space-between;と親divのみで十分です。等しい幅を

.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>

を必要とされていない場合、これはあなたに役に立つホープ場合は1：あなたは、フレックスの成長を定義する必要がいけません。