Question

是的，我知道此网站上有很多关于flexbox的问题和答案，但实际上没有任何帮助。所以我要做的是制作三张内容稍有不同的卡，它们的宽度和高度必须相同。除此之外，我希望根据孩子的身高来设置身高。

我尝试了很多选择，第一个是：

flex: 1 1 0;

这给了我这个结果（红色是弹性容器边框）：他们都不平等。

我发现的唯一解决方案是设置最大宽度和高度。我曾工作过，但我认为这不是最好的解决方案。由于我使用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>

根据最高的孩子设置宽度和高度相同的flexbox项目

1 个答案: