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

Question

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

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

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

这是用户界面：-

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;  

}
}

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

   PS：-另外，我想避免使用媒体查询。如何仅使用 flex 对不同的视图执行相同的操作？

2. 还需要连续显示 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 个真正压扁的框。

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

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

对于孩子，您需要进行一些数学运算：边距（您的卡片之间需要多少距离）加上卡片内的水平填充乘以 2 是大屏幕媒体查询中的最终 flex 值，例如：

.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，否则少于 3 的行将增长以共享可用空间。

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