卡片宽度没有调整到相同的宽度大小，并且一行中只有 3 张卡片

Question

您好，我正在尝试使用 angular-flex 调整 UI 中的卡片。卡片的宽度根据其中的文本长度进行响应。但我希望每张卡片都具有相同的宽度，而不管其中的内容如何。

如果我使用 max-width，那么这会影响移动响应中的卡片。否则在响应式视图中，所有卡片的大小和宽度都相同。

如果我用的是 display:grid; 那么卡片就完美了。但是我需要使用 flex 来响应，所以我使用了 display:flex;

这是UI:-

HTML:-

<div class="container">
  <div class="cont">
    <app-overview *ngFor="let item of data" [extra]="item.extra" [colorcode]="item.color" [ovrno]="item.value" [ovrtitle]="item.info" >
    </app-overview>
  </div>
</div>

CSS:-

.cont {
  display: flex;
  grid-template-columns: 1fr 1fr 1fr;
  flex-direction: column;
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .cont {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    margin: auto;
    align-items: stretch;  

}
}

无论内容长度如何，如何显示相同的卡片宽度？

PS:- 另外，我想避免使用媒体查询。如何仅使用 flex 对不同的视图执行相同的操作？
也只需要连续显示 3 张卡片。

编辑：-

应用程序概览组件：-

HTML:-

<div class="overview" [ngStyle]="getColor()" (click)="onSelect()">
    <p class="no">{{no}}</p>
    <p class="otitle">{{title}}</p>
</div>

CSS:-

.overview {
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  margin: 10px;
  height: 270px;
  cursor: pointer !important;
  .no {
    font-size: 6.5em;
    font-weight: bold;
    padding: 0.3em 0;
  }
  .otitle {
    font-size: 25px !important;
    font-weight: 300;
    padding: 0.3em 0;
  }  
}

Answer 1

我不知道没有媒体查询...这是一个奇怪的要求，因为根据 caniuse，它们得到 97.97% 的支持。但是你可以用一个媒体查询规则完成所有这些，或者跳过它，每行有 3 个真正压扁的框。

在你的 parent 元素上你只需要两条规则：

.cont {
  display: flex;
  flex-wrap: wrap;
}

并且在 children 上你需要一点数学知识：边距（卡片之间需要多少距离）加上卡片内的水平填充乘以 2 就是最终的弹性值在你的大屏幕媒体查询中，例如：

.child {
    margin: .5rem; /* This value plus the left to right padding * 2 == final flex value */
    padding: 2rem .25rem; /* Padding given for example on inner element */  
    flex: 100%;
    display: flex;
}

@media (min-width: 640px) { /* Or whatever breakpoint makes your content not look janky */
    .child {
        flex: 0 1 calc(33.33333% - 1.5rem); /* (.5 + .25)*2 = 1.5rem this is the final flex value */
    }
}

为什么效果很好：在较小的屏幕上（默认）设置 flex: 100% 相当于将 flex-basis 设置为 100%（因为我们提供了一个单位），当我们想要堆叠元素。

在较大的屏幕上，flex-basis（flex 中的最后一个数字属性）被明确设置为屏幕宽度的 1/3 减去内部元素的水平边距和填充之和强制每个容器占据屏幕 1/3 的容器，而 flex-grow（flex 属性中的第一个数字）被设置为 0，否则少于三行的行将增长到分享可用的space。

这是我根据您的图片使用 Svelte 制作的 working example，但 CSS 的概念是相同的，因此您使用的框架无关紧要。

卡片宽度没有调整到相同的宽度大小，并且一行中只有 3 张卡片

The cards width is not adjusting to same width size along with only 3 cards in a row

css

angular-material

angular-flex-layout