Html 显示：flex不在CSS中工作

在我的模板中

<div class="summary-card">    
    <div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
        <div ng-switch ="cardData.uniqueCardsDataFlag">
            <div ng-switch-when=true>

                <div style="background-color: red; width:170px; height: 50px;">
                    1111111
                </div>
            </div>
            <div ng-switch-default>
                <div class="cool-grid">
                    <div style="background-color: blue; width:170px; height: 50px;">
                        222222
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>

现在，它们都堆叠在一起

但我希望他们表现得像：

我不知道如何在这样一个ng重复中设置类，使它们看起来像这样

因此，只有ng switch中的蓝色div默认环绕彼此，而不是环绕红色div

请帮忙

更新

呈现的HTML如下所示：

div.summary-card {
    display: inline-block;
    margin: 5px 10px 15px 0px;
    display: flex;
}
.cool-grid {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

-> 1111111 -> 222222 -> 222222 -> 222222

---

只需使用引导网格即可获得所需的布局。您不必为此使用display flex

下面是一个使用引导网格的布局示例

.行{ 背景：f8f9fa； } 上校{ 边框：实心1px 6c757d； } 瑞德先生{ 背景色：红色； 填充：10px； 利润率：10px； 高度：120px； } 蓝先生{ 背景颜色：蓝色； 填充：10px； 利润率：10px； } sd sd sd sd

---

我已经设计了一个简化版本，我想它能满足你的需求

外层div需要flex-wrap:wrap，红色div需要将其flex-basis设置为100%。蓝色的将被包装到下一列，并根据你给他们的任何规则进行布局

#outer{
  height:200px;
  border:1px solid grey;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content:space-between;
  width:500px;
}

#red{
  background-color:red;
  width:100px;
  flex-basis:100%;
}
.blue{
  flex-basis:25%;
  width:100px;
  background-color:blue;
}

---

检查此布局。我已经使用flex生成了它

U可以相应地更改红色块的高度

当同一行上没有足够的宽度时，蓝色块将自动换行到下一行

* { 框大小：边框框； 保证金：0； 填充：0； } .汇总卡{ 显示器：flex； 弯曲方向：行； } .左秒， .右秒{ 弹性：1； 显示器：flex； } .右秒{ 弹性：1； 显示器：flex； 柔性包装：包装； } -> 1111111 -> 222222 -> 222222 -> 222222

---

请共享呈现的HTML。@cale_b请查看更新的呈现详细信息。他没有使用引导，请查看呈现的HTML。只是展示了另一种实现布局的简单方法为什么加载整个框架（比如bootstrap）只是为了完成一些简单CSS应该可以完成的事情？@suzan我理解，但不知怎的，我能在不使用css规则进行框架级更改的情况下实现同样的效果吗？如果你想在不添加另一个css框架的情况下实现同样的效果，我想@will的答案是这样的。但是，当问题出现时，如何使用ng repeat添加类呢？确实如此，我已经更新了代码笔，使其更加清晰