如何在 mat-card-header 中将元素组设置为左侧和右侧?
How to set groups of elements to the left and to the right inside the mat-card-header?
我需要在左侧和右侧设置 header 个元素组。
我有类似的东西:
<mat-card-header>
<div fxLayout="row">
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
<div>Alex Isakau</div>
<a href="https://www.twitter.com/alexisakau">
<img alt="tw" src="../../assets/img/twitter.png" width="40" height="40">
</a>
<a href="https://www.linkedin.com/in/alexisakau/">
<img alt="in" src="../../assets/img/linked.png" width="40" height="40">
</a>
</div>
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
<div>about</div>
<div>portfolio</div>
<div>contact</div>
</div>
</div>
</mat-card-header>
和 CSS 相对于 mat-card-header:
.mat-card {
padding: 0;
}
.mat-card-header {
background-color: rgb(42, 5, 128);
color: white;
padding: 25px 5px 25px;
}
添加 fxLayoutGap 后:
<mat-card-header>
<div fxLayout="row" fxLayoutGap="120%">
正如我所说,它没有响应
你可以通过制作你的包装器来做到这一点 div fxLayoutAlign 'space-between'
<mat-card-header>
<div fxLayout="row" fxFlex="1 0 0" fxLayoutAlign="space-between">
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
<div>Alex Isakau</div>
<a href="https://www.twitter.com/alexisakau">
<img alt="tw" src="../../assets/img/twitter.png" width="40" height="40">
</a>
<a href="https://www.linkedin.com/in/alexisakau/">
<img alt="in" src="../../assets/img/linked.png" width="40" height="40">
</a>
</div>
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
<div>about</div>
<div>portfolio</div>
<div>contact</div>
</div>
</div>
</mat-card-header>
或
给 margin-left: auto
你想向右移动的 div
<mat-card-header>
<div fxLayout="row" fxFlex="1 0 0">
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
<div>Alex Isakau</div>
<a href="https://www.twitter.com/alexisakau">
<img alt="tw" src="../../assets/img/twitter.png" width="40" height="40">
</a>
<a href="https://www.linkedin.com/in/alexisakau/">
<img alt="in" src="../../assets/img/linked.png" width="40" height="40">
</a>
</div>
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center" style="margin-left:auto">
<div>about</div>
<div>portfolio</div>
<div>contact</div>
</div>
</div>
</mat-card-header>
并且在这两种情况下都通过提供 fxFlex="1 0 0"
来制作包装器 div flex-grow: 1
我需要在左侧和右侧设置 header 个元素组。
我有类似的东西:
<mat-card-header>
<div fxLayout="row">
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
<div>Alex Isakau</div>
<a href="https://www.twitter.com/alexisakau">
<img alt="tw" src="../../assets/img/twitter.png" width="40" height="40">
</a>
<a href="https://www.linkedin.com/in/alexisakau/">
<img alt="in" src="../../assets/img/linked.png" width="40" height="40">
</a>
</div>
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
<div>about</div>
<div>portfolio</div>
<div>contact</div>
</div>
</div>
</mat-card-header>
和 CSS 相对于 mat-card-header:
.mat-card {
padding: 0;
}
.mat-card-header {
background-color: rgb(42, 5, 128);
color: white;
padding: 25px 5px 25px;
}
添加 fxLayoutGap 后:
<mat-card-header>
<div fxLayout="row" fxLayoutGap="120%">
正如我所说,它没有响应
你可以通过制作你的包装器来做到这一点 div fxLayoutAlign 'space-between'
<mat-card-header>
<div fxLayout="row" fxFlex="1 0 0" fxLayoutAlign="space-between">
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
<div>Alex Isakau</div>
<a href="https://www.twitter.com/alexisakau">
<img alt="tw" src="../../assets/img/twitter.png" width="40" height="40">
</a>
<a href="https://www.linkedin.com/in/alexisakau/">
<img alt="in" src="../../assets/img/linked.png" width="40" height="40">
</a>
</div>
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
<div>about</div>
<div>portfolio</div>
<div>contact</div>
</div>
</div>
</mat-card-header>
或
给 margin-left: auto
你想向右移动的 div
<mat-card-header>
<div fxLayout="row" fxFlex="1 0 0">
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center">
<div>Alex Isakau</div>
<a href="https://www.twitter.com/alexisakau">
<img alt="tw" src="../../assets/img/twitter.png" width="40" height="40">
</a>
<a href="https://www.linkedin.com/in/alexisakau/">
<img alt="in" src="../../assets/img/linked.png" width="40" height="40">
</a>
</div>
<div fxLayout="row" fxLayoutGap="11px" fxLayoutAlign="center center" style="margin-left:auto">
<div>about</div>
<div>portfolio</div>
<div>contact</div>
</div>
</div>
</mat-card-header>
并且在这两种情况下都通过提供 fxFlex="1 0 0"
flex-grow: 1