CSS Flexbox Display Проблема

Question

Сейчас я нахожусь в сложной ситуации.

У меня есть два templates, которые должны отображаться based on ng-switch как:

    <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>  

Итак, the first div when ng-switch is set to true нужно выровнять рядом с другими that get generated by ng-repeat.

что-то вроде css-grid.

Проблема в <div class="summary-card", которая устанавливает элементы в display flex. Я не могу изменить или изменить его, но мне нужен этот стиль только для div, сгенерированных ng-repeat.

Но теперь он применяется ко всем элементам div, например:

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

        display: flex;
}

Как я могу исправить то же самое?

Answer 1

вы должны следовать структуре DOM, как это

<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 должен быть что-то вроде

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

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

проверить это: - https://codepen.io/anon/pen/gzomoN

Это не полный ответ, но он даст вам некоторое представление

вы также можете использовать сетку, если хотите

.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;
}