首页 文章

柔性盒物品的空间不均匀

提问于
浏览 次
0

我试图通过将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的容器均匀分布，因此列的宽度都相同？

enter image description here

html css css3 flexbox

1 回答

  • 0

    如果你想拥有相同的宽度，那么你需要定义每个元素 flex-grow:1 . 或者元素之间只需要空格，那么只有父级div就足够了.2752712_就足够了 . 你不需要定义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>

    希望这对你有所帮助 .

    回复于

相关问题