对齐 mat-cards 内容（图像、文本和按钮）

Question

我正在使用列表中的 mat-card 并且对齐有问题。

这是我所拥有的：

这是我想要的：

编码 ：

 <div class="margin-top-20" fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="15px grid">
  <div fxFlex="20" fxFlex.md="33" *ngFor="let advert of adverts; let i = index" class="padding-fix">
    <div fxFlexFill fxLayoutAlign="center stretch">
      <mat-card class="ad">
        <div fxLayoutAlign="space-between center">
          <img mat-card-image src="test" alt="test">
        </div>
        <mat-card-title>test</mat-card-title>
        <mat-card-content>
          <p>
            test
          </p>
        </mat-card-content>
        <mat-card-actions align="end">
        </mat-card-actions>
      </mat-card>
    </div>
  </div>
</div>

我不明白我可以将图像居中（必要时调整大小）。

编辑： 感谢 coreuter 的回答，我快要得到我想要的了。

第一个块与其他块的高度不同。而且我在每一行的末尾都有一些空白区域（我想要每行 5 个元素）。

更新后的代码：

 <div class="margin-top-20" fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="15px">
  <mat-card fxFlex="20" (click)="addProduct()" class="mat-card-add-button">
    <div>
      <span style="font-size:32px;text-align:center">+<br/>Add product</span>
    </div>
  </mat-card>
  <mat-card fxFlex="20" *ngFor="let product of products; let i = index" class="product">
    <img class="image" mat-card-image src="{{product.picture.uri}}" alt="photo">
    <mat-card-title>{{product.name}}</mat-card-title>
    <mat-card-content>
      <p>
        test
      </p>
    </mat-card-content>
    <mat-card-actions align="end">
    </mat-card-actions>
  </mat-card>
</div>

编辑2：

我认为这几乎是完美的。我试过在 mat-card-content div 里面放一大段内容，不知道好不好。这是我所拥有的屏幕截图：

你认为有可能让按钮与大的 mat-card （最后一个）高度相同吗？另一件事，我看不到每行第一个元素的 border-left 。

这里更新的代码：

 <div class="margin-top-20" fxFlexFill fxLayout="row wrap" fxLayoutAlign="start start" fxLayoutGap="20px">
    <mat-card fxLayoutAlign="center center" fxFlex="0 1 calc(20% - 20px)" (click)="addProduct()" class="product" style="height:413px">
        <div>
            <span fxLayoutAlign="center center" style="font-size:32px;text-align:center">+<br />Add product</span>
        </div>
    </mat-card>
    <mat-card fxFlexFill fxFlex="0 1 calc(20% - 20px)" *ngFor="let product of products; let i = index" class="product">
        <img class="image" mat-card-image src="{{product.picture.uri}}" alt="photo">
        <mat-card-title>{{product.name}}</mat-card-title>
        <mat-card-content>
            <p *ngIf="i == 3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus, leo id pulvinar vestibulum, ligula nisl tincidunt magna, eu volutpat leo neque quis justo. Fusce semper ante id mi porta porta. Pellentesque nec pretium purus. Curabitur lobortis tempus consectetur. Nam ullamcorper gravida erat sed suscipit. Morbi quis porttitor nunc. Suspendisse lacinia a turpis vitae laoreet. Aliquam pellentesque scelerisque urna. Cras vulputate nisi sed elit commodo cursus. Aenean interdum, erat at convallis dictum, urna enim tincidunt nisi, vitae tempor nisi nisi a tellus. Aliquam volutpat dui eget gravida eleifend. Nullam pulvinar justo eget tellus commodo, eget molestie dui convallis. Curabitur at fermentum lorem. Maecenas porttitor sem ut enim efficitur bibendum et vel metus.
            </p>
            <p *ngIf="i != 3">
                   test
            </p>
        </mat-card-content>
        <mat-card-actions align="end">
            <button mat-icon-button>
                <mat-icon>mode_edit</mat-icon>
            </button>
            <button mat-icon-button>
                <mat-icon>delete</mat-icon>
            </button>
        </mat-card-actions>
    </mat-card>
</div>

再次感谢您的帮助，我真的很感激！

编辑 3 ：这个版本有效！非常感谢coreuter！ 在 StackBlitz 上查看。

mat-card-content 不是由“fxFlex”属性修复的。内容超出垫卡。 （它在最后一个 StackBlitz 上工作，但不适合我）。

 .mat-card {
    padding: 18px !important; /* less padding than per default */
}

.mat-card-image {
    width: calc(100% + 36px) !important; /* update padding */
    margin: 0 -24px 16px -18px !important; /* update padding */
}

.mat-tab-label {
    font-size: 16px !important;
}

.mat-card-title {
    font-size:24px !important;
    font-weight: 500 !important;
}

.mat-card-content {
    font-size: 14px !important;
    min-height: 30px; /* <--- to remove !!! */
}

.product {
    margin-bottom: 25px;
    /*min-width: 180px;
    text-align: center;*/
}

/* desktop button */
.mat-card-add-button {
    border: 1px dashed grey;
    box-shadow:none !important;
    cursor:pointer;
}

.product img {
    height: 250px;
    object-fit: contain;
}

 <div *ngIf="products.length > 0" style="margin-left:10px;">
    <div fxLayout="row wrap" fxLayoutAlign="start stretch" fxLayoutGap="20px">
        <mat-card fxLayoutAlign="center center" fxFlex="0 1 calc(20% - 20px)" fxFlex.md="0 1 calc(25% - 20px)" fxFlex.sm="0 1 calc(33% - 20px)" fxHide.xs="true" (click)="addProduct()" class="product mat-card-add-button">
            <div fxLayoutAlign="center center" style="font-size:32px;text-align:center">+<br />Add product</div>
        </mat-card>
        <mat-card fxLayout="column" fxFlex.md="0 1 calc(25% - 20px)" fxFlex="0 1 calc(20% - 20px)" fxFlex.sm="0 1 calc(33% - 20px)" fxFlex.xs="100" *ngFor="let product of products; let i = index" class="product">
            <img mat-card-image src="{{product.picture.uri}}" alt="photo">
            <mat-card-title>{{product.name}}</mat-card-title>
            <mat-card-content fxFlex>
                    <p *ngIf="i == 3">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus, leo id pulvinar vestibulum, ligula nisl tincidunt
                        magna, eu volutpat leo neque quis justo. Fusce semper ante id mi porta porta. Pellentesque nec pretium purus. Curabitur
                        lobortis tempus consectetur. Nam ullamcorper gravida erat sed suscipit. Morbi quis porttitor nunc. Suspendisse lacinia
                        a turpis vitae laoreet. Aliquam pellentesque scelerisque urna. Cras vulputate nisi sed elit commodo cursus. Aenean interdum,
                        erat at convallis dictum, urna enim tincidunt nisi, vitae tempor nisi nisi a tellus. Aliquam volutpat dui eget gravida
                        eleifend. Nullam pulvinar justo eget tellus commodo, eget molestie dui convallis. Curabitur at fermentum lorem. Maecenas
                        porttitor sem ut enim efficitur bibendum et vel metus.
                    </p>
                    <p *ngIf="i != 3">
                        test
                    </p>
            </mat-card-content>
            <mat-card-actions fxFlexAlign="end" align="end">
                <button mat-icon-button>
                    <mat-icon>mode_edit</mat-icon>
                </button>
                <button mat-icon-button>
                    <mat-icon>delete</mat-icon>
                </button>
            </mat-card-actions>
        </mat-card>
    </div>
</div>

原文由 Joe Allen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于我回答了您之前的 SO 问题，因此我将根据我之前的答案构建我对这个问题的答案。请参阅此更新的 Stackblitz ，其中包含不同宽度和高度的图像。

编辑：调整答案/stackblitz 以制作包含 5 个元素的行。

解释

为了使图像始终保持相同的高度，我将“图像”类添加到 <img> -tag （您当然可以将 css 应用到 img -tag 直接 .product img{...} 以及）。

 <img class="image" mat-card-image src="{{product.picture.url}}" alt="photo">

并应用了以下 CSS：

 .image{
  height: 150px; /* adjust as needed */
  object-fit: contain;
}

使用 object-fit: contain 您的图像将始终正确缩放并在可用区域内完全可见。

请记住 object-fit 目前仅 被以下浏览器完全支持。

编辑：

为了在每行中获得 5 个元素，您必须调整 fxLayoutGap 并使用 fxFlex 属性计算每个元素的宽度。请按如下方式更改您的代码..

 <div class="container" fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px">

    <!-- Add addProduct-button outside loop -->
    <mat-card fxFlex="0 1 calc(20% - 20px)" (click)="addProduct()" class="product">
     ...
    </mat-card>

        <!-- loop over the products -->
    <mat-card fxFlex="0 1 calc(20% - 20px)" *ngFor="let product of products; let i = index" class="product">
      ...
    </mat-card>

</div>

..并将 fxLayoutGap 和 fxFlex 的计算范围内的 20px 设置更改为您想要的值。

现在设置这些值后，您必须应用最小宽度值，否则所有元素的宽度都会变小并且行不会换行：

 .product{
  min-width: 180px; /* adjust as desired */
  min-height: 250px;
  margin-bottom: 20px; /* same as fxLayoutGap for even distribution */
}

编辑 2

要使第一个元素与其他元素的高度相同，您必须将 .product CSS 类的 (min-)height 调整为等于最高产品的高度。

编辑 3（回答问题的编辑 2）

由于您尚未将问题标记为已回答，因此我已修改您在编辑#2 中提供的代码以完成您想要的设计： stackblitz

我更改了以下内容：

• 将容器上的 fxLayoutAlign 更改为 "space-evenly stretch" 而不是 fxLayoutAlign="start start" 这会将所有项目均匀地分布在 x 轴上的高位并使其拉伸行的最高元素。
• 删除所有 fxFlexFill
• 添加 fxFlex 到 mat-card-content
• 从 .product CSS-class 中删除了高度

关于左侧的边框。我认为您的容器离浏览器窗口左侧太近了。我也更改了我的 stackblitz 中的容器 css。

原文由 coreuter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

.ad{
 display:flex;
 flex-direction:coloumn;
 height:100%;
}
img,mat-card-content{
flex-grow: 1;
}
mat-card-actions{
display: inline-block;
align-self: flex-end;
}

你可以试试这个。

原文由 mkk 发布，翻译遵循 CC BY-SA 4.0 许可协议