html - 根据最高的 child 设置具有相同宽度和高度的 flexbox 元素

Question

是的，我知道这个网站上有很多关于 flexbox 的问题和答案，但没有一个对我有用。所以我想做的是制作三张内容略有不同的卡片，它们的宽度和高度尺寸必须相同。除此之外，我希望根据最高的 child 设置高度。

我尝试了很多选项，第一个是:

flex: 1 1 0;

这给了我那个结果(红色是 flex 容器边框): 它们都不相等。

我找到的唯一解决方案是设置最大宽度和高度。我工作了，但我认为这不是最好的解决方案。因为我使用 flexbox，所以我希望它流畅且响应迅速。

CSS:

.flex-container {
    border: 1px solid red;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.flex-items {
    cursor: pointer;
    margin: 20px;
    border-radius: 2px;
    padding: 0px;
    flex: 1 1 0;
    /* flex-basis: 100%; */
    /* height: 100%; */
    /* max-width: 280px; */
    /* width: max-content; */
    animation-name: fadeInDown;
    animation-duration: 0.4s;
}

HTML:

<div class="flex-container">
  <div *ngFor="let module of modules" class="{{module.name}}">
    <mat-card matRipple [matRippleColor]="white"  class="flex-items"
    *ngxPermissionsOnly="module.permissionsRequired">
      <div class="card-bg-image"></div>
        <span routerLink={{module.routing}}>
            <mat-card-title>
              <h1>
                  {{module.name}}
              </h1>
            </mat-card-title>
          <mat-icon>{{module.icon}}</mat-icon>
          <hr>
          <mat-card-content>
            <h3>
                {{module.description}}
            </h3>
          </mat-card-content>
        </span>
    </mat-card>
  </div>
</div>

有什么想法吗？:)

Answer 1

这是您实际 html 结构的解决方案:

.container {
  display: flex;
  align-items: stretch;
  width: 400px; /* just for example */
}

.item {
  display: flex; /* set height 100% for children */
  flex: 1 1 100%;  
  margin: 10px;
}

.card {
  height: 100%;
  width: 100%;
  background: red;
}

<div class="container">
  <div class="item">
    <div class="card">short text</div>
  </div>
  <div class="item">
    <div class="card">text</div>
  </div>
  <div class="item">
    <div class="card">Setting flexbox items with same width and height based on the tallest child</div>
  </div>
</div>

但我建议您将 ngFor 指令设置为 mat-card 以减少嵌套元素的数量。代码看起来像:

.container {
  display: flex;
  align-items: stretch;
  width: 400px; // just for example
}

.card {
  flex: 1 1 100%;  
  margin: 10px;
  background: red;
}

<div class="container">
  <div class="card">short text</div>
  <div class="card">text</div>
  <div class="card">Setting flexbox items with same width and height based on the tallest child</div>
</div>