CSS Flexbox显示问题 [英] CSS Flexbox Display Issue

问题描述

我现在处于这种棘手的情况.

It is kind of tricky situation I am in now.

我有两个模板，需要基于ng-switch 显示，例如:

I have two templates that need to be displayed based on ng-switch like:

    <div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
        <div ng-switch ="cardData.uniqueCardsDataFlag">
            <div ng-switch-when=true>
                <div style="background-color: #ccc !important;">
                    11111 my custom div
                </div>
            </div>
            <div ng-switch-default>
                <div class="card">
                    <div class="card-title" style="text-align: left;" id="{{cardData.label}}">{{cardData.label}}</div>
                    <div class="card-data">
                       .....
                    </div>
                </div>
            </div>
        </div>
    </div>  

因此，将ng-switch设置为true时的第一个div 需要与其他由ng-repeat生成的div 对齐.

So, the first div when ng-switch is set to true needs to be aligned side by side with the others that get generated by ng-repeat.

类似 css-grid 的东西.

问题出在< div class ="summary-card" 上，该项目将项目设置为 display flex .我无法修改或更改它，但仅需要ng-repeat生成的div的这种样式.

The problem is <div class="summary-card" that sets the items to display flex. I cannot modify or change it but I only need this style for the divs generated by ng-repeat.

但是现在它已应用于所有div，例如:

But now it gets applied to all the divs, like:

div.summary-card {
        display: inline-block;
        margin: 5px 10px 15px 0px;

        display: flex;
}

我该如何解决?

推荐答案

您应该遵循这样的dom结构

you should follow dom structure like this

<div class="summary-card">
  <div>
    <div style="background-color: #ccc !important;">
      11111 my custom div
    </div>
  </div>
  <div class="cool-grid">
    <div class="card">
      <div class="card-title" style="text-align: left;">{{cardData.label}}</div>
      <div class="card-data">
        .....
      </div>
    </div>
    <div class="card">
      <div class="card-title" style="text-align: left;">{{cardData.label}}</div>
      <div class="card-data">
        .....
      </div>
    </div>
    <div class="card">
      <div class="card-title" style="text-align: left;">{{cardData.label}}</div>
      <div class="card-data">
        .....
      </div>
    </div>
    <div class="card">
      <div class="card-title" style="text-align: left;">{{cardData.label}}</div>
      <div class="card-data">
        .....
      </div>
    </div>
  </div>
</div>

并且您的CSS应该类似于

and your css should be something like

.summary-card {
  display: flex;
  width: 350px
}

.cool-grid {
  display: flex;
  flex-wrap: wrap;
}

检查此内容:- https://codepen.io/anon/pen/gzomoN

这不是完整的答案，但会给您一些想法

This is not the complete answer but it will give you some idea

如果需要，您还可以使用网格布局

you can also use grid layout if you want

.summary-card {
  display: grid;
  grid-template-columns: 200px auto;
  grid-coloumn-start: 1;
  grid-column-end: 1;
}

.cool-grid {
  grid-template-columns: 200px auto;
  grid-coloumn-start: 1;
  grid-column-end: 3;
  display: inline-grid;
  flex-wrap: wrap;
}

这篇关于CSS Flexbox显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！