display：flex在CSS中不起作用 [英] display: flex not working in CSS
本文介绍了display：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-switch将仅为真;因此红色div将只有一个，其余的将是蓝色。
CSS看起来像：
div.summary-card {
display：inline-block;
margin：5px 10px 15px 0px;
display：flex;
}
.cool-grid {
display：flex;
flex-wrap：wrap;
border：1px纯黑色;
}
现在，它们都堆叠在一起。
但是我希望他们能像这样展示：
我不知道如何在这样的内部提供类 - 重复使它们看起来像这样。
这样只有ng-switch-default内的蓝色div才会围绕彼此而不是围绕红色div。
请帮助。
更新
呈现的HTML看起来像：
$ b
< 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-gridng-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-gridng-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-gridng-switch-default =><！ - < div ng-include =''......' >< / DIV> - > < div style =background-color：blue; width：170px; height：50px;> 222222< / DIV> < / DIV><！----> < / DIV> < / DIV><！----> < / div>
解决方案
<
外部div需要 flex-wrap：wrap ，红色的人需要将其弹性基础设置为100％。然后，蓝色的包裹会被包装到下一列，并根据您给予他们的任何规则进行布置......
＃外{
height：200px;
border：1px纯灰色;
display：flex;
flex-direction：column;
flex-wrap：wrap;
justify-content：space-between;
width：500px;
}
#red {
background-color：red;
width：100px;
弹性基础：100％;
}
.blue {
flex-basis：25％;
width：100px;
background-color：blue;
}
In my template
<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 looks like:
div.summary-card {
display: inline-block;
margin: 5px 10px 15px 0px;
display: flex;
}
.cool-grid {
display: flex;
flex-wrap: wrap;
border: 1px solid black;
}
Now, they all stack up on top of each other.
But I want them to show like:
I am not sure how to give classes inside such a ng-repeat to make them look like this.
so that only the blue divs inside ng-switch-default wraps around each other and not around the red div.
Please help.
UPDATE
Rendered HTML looks like:
<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>
解决方案
I've knocked up a simplified version that I think does what you're after.
The outer div needs flex-wrap:wrap, the red one needs to have its flex-basis set at 100%. The blue ones will then wrap to the next column and be laid out out according to whatever rules you give them...
#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;
}
这篇关于display：flex在CSS中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
