[英]flex-box items are not space evenly
我试图通过将flex-grow属性设置为1来使flex-box容器中的项目均匀分布,但是没有任何影响。 在包装之前,应根据最宽的项目调整列的大小。 在所有物品之间平均分配空间的正确方法是什么?
.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类的容器均匀地隔开,所以列的宽度都相同?
如果要具有相等的宽度,则需要定义每个元素flex-grow:1
。 或元素之间只需要空格,然后只需要justify-content: space-between;
给父div就足够了。 如果不需要相等的宽度,则无需定义flex-grow: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>
希望这对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.