flex-box items are not space evenly

Question

I'm trying to get the items in a flex-box container to be evenly spaced, by setting the flex-grow property to 1, but it's not having any affect. The columns of the items are sized according to the widest before being wrapped. What is the proper way to distribute the space evenly amongst all the items?

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

How do I get all the containers with class flex-item to be evenly spaced, so the columns are all the same width?

Answer 1

If you want to have equal width then you need to deine each element flex-grow:1 . or only space is required between elements then only justify-content: space-between; to parent div is enough. you dont need to define flex-grow:1 in case if equal width is not required

 .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 is helpful to you.