显示：flex 在 CSS 中不起作用

Question

在我的模板中

<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-switch will be true only once; hence the red div will be only one and the rest will be blue.

CSS 看起来像：

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

现在，它们都堆叠在一起了。

但我希望它们显示为：

我不确定如何在这样的 ng-repeat 中提供类以使它们看起来像这样。

这样只有 ng-switch-default 中的蓝色 div 相互环绕，而不是红色 div。

请帮忙。

更新

呈现的 HTML 看起来像：

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

	        		<div style="background-color: red; width:170px; height: 50px;">
	        			1111111
	        		</div>
        		
        		</div><!---->
        		<!---->
            </div>
        </div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
        	<div ng-switch="cardData.uniqueCardsDataFlag">
        		<!---->
        		<!----><div class="cool-grid" ng-switch-default="">
<!--             			<div  ng-include="'.....'"></div> -->
						<div style="background-color: blue; width:170px; height: 50px;">
							222222
						</div>
            	</div><!---->
            </div>
        </div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
        	<div ng-switch="cardData.uniqueCardsDataFlag">
        		<!---->
        		<!----><div class="cool-grid" ng-switch-default="">
<!--             			<div  ng-include="'.....'"></div> -->
						<div style="background-color: blue; width:170px; height: 50px;">
							222222
						</div>
            	</div><!---->
            </div>
        </div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
        	<div ng-switch="cardData.uniqueCardsDataFlag">
        		<!---->
        		<!----><div class="cool-grid" ng-switch-default="">
<!--             			<div  ng-include="'......'"></div> -->
						<div style="background-color: blue; width:170px; height: 50px;">
							222222
						</div>
            	</div><!---->
            </div>
        </div><!---->  
    </div>

Answer 1

我已经完成了一个简化版本，我认为它可以满足您的需求。

外部 div 需要flex-wrap:wrap，红色需要将其 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;
}

codepen here

Answer 2

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

以下是使用引导网格布局的示例

.row {
  background: #f8f9fa;
}

.col {
  border: solid 1px #6c757d;
 
}
.red{
  background-color:red;
   padding: 10px;
   margin: 10px;
   height: 120px;
}
.blue{
  background-color: blue;
   padding: 10px;
   margin: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6" class="">
       <div class="red">
            sd
       </div>
    </div>
    <div class="col-md-6">
      <div class="row">
          <div class="col-md-6">
            <div class="blue">
            sd
            </div>
          </div>
          <div class="col-md-6">
            <div class="blue">
            sd
            </div>
          </div>
          <div class="col-md-6">
            <div class="blue">
            sd
            </div>
          </div>
        </div> 
    </div>
  </div>
  
</div>

Answer 3

检查此布局。我使用 flex 来生成它

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

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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.summary-card {
  display: flex;
  flex-direction: row;
}

.left-sec,
.right-sec {
  flex: 1;
  display: flex;
}

.right-sec {
  flex: 1;
  display: flex;
flex-wrap: wrap;
}

<div class="summary-card">

  <div class="left-sec">
    <!---->
    <div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
      <div ng-switch="cardData.uniqueCardsDataFlag">
        <!---->
        <div ng-switch-when="true">
          <!--         			<div ng-include="'......'"></div> -->

          <div style="background-color: red; width:170px; height: 50px;">
            1111111
          </div>

        </div>
        <!---->
        <!---->
      </div>
    </div>
    <!---->
  </div>
  <div class="right-sec">

      <div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
        <div ng-switch="cardData.uniqueCardsDataFlag">
          <!---->
          <!---->
          <div class="cool-grid" ng-switch-default="">
            <!--             			<div  ng-include="'.....'"></div> -->
            <div style="background-color: blue; width:170px; height: 50px;">
              222222
            </div>
          </div>
          <!---->
        </div>
      </div>
      <!---->
      <div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
        <div ng-switch="cardData.uniqueCardsDataFlag">
          <!---->
          <!---->
          <div class="cool-grid" ng-switch-default="">
            <!--             			<div  ng-include="'.....'"></div> -->
            <div style="background-color: blue; width:170px; height: 50px;">
              222222
            </div>
          </div>
          <!---->
        </div>
      </div>


    <!---->
    <div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
      <div ng-switch="cardData.uniqueCardsDataFlag">
        <!---->
        <!---->
        <div class="cool-grid" ng-switch-default="">
          <!--             			<div  ng-include="'......'"></div> -->
          <div style="background-color: blue; width:170px; height: 50px;">
            222222
          </div>
        </div>
        <!---->
      </div>
    </div>
  </div>


  <!---->
</div>