CSS Flexbox 显示问题答案

【问题标题】：CSS Flexbox Display IssueCSS Flexbox 显示问题
【发布时间】：2018-10-18 07:49:09
【问题描述】：

我现在的处境有点棘手。

我有两个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。 我无法修改或更改它，但我只需要 ng-repeat 生成的 div 的这种样式。

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

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

        display: flex;
}

我该如何解决这个问题？

【问题讨论】：

标签： javascript html angularjs css

【解决方案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;
}

【讨论】：