CSS Flexbox Display Issue

问题

It is kind of tricky situation I am in now.

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>

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.

something like a css-grid.

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.

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

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

        display: flex;
}

How can I fix the same?

回答1:

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>

and your css should be something like

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

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

check this out :- 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;
}

来源：https://stackoverflow.com/questions/50232263/css-flexbox-display-issue

标签

javascript

html

css

angularjs

css3