Flex-Box-Elemente sind nicht gleichmäßig Platz

Question

Ich versuche, die Elemente in einem Flex-Box-Container gleichmäßig verteilt werden, indem Sie die Flex-grow-Eigenschaft auf 1 festlegen, aber es hat keine Auswirkungen. Die Spalten der Artikel werden nach der größten Größe sortiert, bevor sie verpackt werden. Wie verteilt man den Raum gleichmäßig auf alle Objekte?

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

Wie bekomme ich alle Behälter mit class flex-Elemente gleichmäßig beabstandet sein, so dass die Spalten sind alle die gleiche Breite?

Answer 1

Wenn Sie die gleiche Breite haben wollen, dann müssen Sie flex-grow:1 jedes Element auf DEINE. oder nur Platz zwischen den Elementen ist dann nur justify-content: space-between; zu Eltern div ist genug. Sie brauchen nicht flex-wachsen zu definieren: 1 im Falle, wenn die gleiche Breite nicht

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

Hope this hilfreich für Sie ist erforderlich.