对齐mat-cards内容(图像,文本和按钮)

问题描述 投票:3回答:3

我在列表中使用mat-card,我对齐了问题。

在这里我有:

enter image description here

这就是我想要的:

enter image description here

代码 :

<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的回答,我接近得到了我想要的东西。

enter image description here

第一个区块的高度不同于其他区块。而且我在每行的末尾都有一些空格(我希望每行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中的一个大内容,我不知道它是否好。这是我的截图:

enter image description here

您是否认为可以将按钮放在与大垫卡(最后一张)相同的高度?另一件事,我看不到每行第一个元素的边框左边。

这里更新的代码:

<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! (https://stackblitz.com/edit/angular-xprafs

mat-card-content不是由“fxFlex”属性修复的。内容超出了mat-card。 (它正在使用最后一个stackblitz但不适合我)。

enter image description here

 <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>

css:

.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;
}
css angular angular-material
3个回答
2
投票

既然我回答了你以前的SO question,我将根据我之前的回答建立我对这个问题的答案。请参考此更新的Stackblitz与不同宽度和高度的图像。

Preview

编辑:调整答案/ stackblitz以生成包含5个元素的行。

Explanation

为了使图像始终保持相同的高度,我将类“image”添加到<img>-tag中(当然,您也可以使用img将css直接应用于.product img{...}-tag)。

<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目前只有fully supported by the following browsers

EDIT:

为了获得每行中的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上的20px设置和fxFlex的计算内更改为您想要的值。

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

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

EDIT 2

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

EDIT 3 (to answer edit 2 of the question)

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

我改变了以下内容:

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

关于左侧的边框..我假设您的容器太靠近浏览器窗口左侧。我也改变了我的stackblitz中的容器css。


0
投票
.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;
}

你可以试试这个。


0
投票

您可能必须使用固定尺寸的mat-card,并确保图像适合任何可用的空间。

.margin-top-20>div>div {
  display: flex;
  width: 100%;
}

.ad {
  width: 200px;
  height: 250px;
  min-height: 250px;
  max-width: 200px;
  border: thin solid #eee;
}

.ad>div {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ad>div>img {
  flex: 0 1;
  width: 100%;
  height: auto;
}
<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="https://via.placeholder.com/150x50" 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>
      <mat-card class="ad">
        <div fxLayoutAlign="space-between center">
          <img mat-card-image src="https://via.placeholder.com/50x150" 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>
      <mat-card class="ad">
        <div fxLayoutAlign="space-between center">
          <img mat-card-image src="https://via.placeholder.com/350x150" 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>
© www.soinside.com 2019 - 2024. All rights reserved.