嵌套的弹性盒没有平均增长答案

【问题标题】：Nested flexboxes not growing equally嵌套的弹性盒没有平均增长
【发布时间】：2015-11-18 10:48:04
【问题描述】：

我正在使用 Angular 中的状态摘要栏，遇到了一个问题，我无法让基于 flex-box 的布局看起来正确。

它遍历尽可能多的类别，并为每个类别放置适当数量的块。这个结构最终看起来像这个代码笔：http://codepen.io/emoody/pen/OVKjVY

角度代码：

<ul class="list-status">
    <li ng-repeat="category in data">
      <div ng-repeat="item in category"></div>
    </li>
</ul>

SCSS 样式：

.list-status{
  width: 100%; margin: 0; padding: 0;
  display: flex;
  flex-flow: row nowrap;
  li{
    display: flex;
    flex-grow: 1;
    div{
      height: 20px;
      flex-grow: 1;
      margin-right: 1px;
    }
  }
}

不一定是 ul/li，但据我所知，每个重复层确实需要某种容器，这就是问题所在。

预期的行为是应该呈现单行 div，大小都相同。结果是项目较多的类别有小条，而其他类别之间有很大的空间。

我不确定这里的最佳解决方案是构建 Angular 部分的其他方式，还是不同的 CSS 解决方案。

编辑添加图片

我得到了什么：

我想得到什么：

【问题讨论】：

很难理解您的预期行为，您可以添加图片吗？
添加了预期结果的图像。

标签： css angularjs

【解决方案1】：

更新：

当您嵌套display: flex 声明时，它无法根据项目总数计算宽度，而是根据li 计算div 数量的宽度

如果您可以从组合中删除 li，则布局应该按您的预期工作，尽管这很可能涉及更改您的数据结构。

参见 Adding rows with ng-repeat and nested loop 添加一个允许无容器语法的指令。

http://codepen.io/nikglavin/pen/Ejqvqe

【讨论】：

不完全，如果我不清楚，对不起！我用预期结果的图像更新了原始问题。目标是获得一排相同大小的 div，但据我所知，我需要保留嵌套结构，以便可以循环遍历两个 ng-repeats。
谢谢，看起来答案是重组数据而不是嵌套东西。感谢您的帮助！

【解决方案2】：

弹性盒只考虑它们所在的上下文。你会注意到第一层弹性盒的宽度都是一样的。第二级弹性盒根据容器的宽度和容器内弹性项目的数量来调整大小。

内部弹性项目较少的容器会使弹性项目更大，因为有更多的增长空间。

在lis 上设置width 或min-width 可能会得到更好的结果，或者不嵌套弹性项目，但在这些情况下，这种布局可能根本不需要弹性框。

【讨论】：