[英]How to set groups of elements to the left and to the right inside the mat-card-header?
I need to set groups of header elements to the left and to the right. 我需要在左侧和右侧设置标题元素组。
I have something like that: 我有这样的事情:
<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>
And CSS that's relative to the mat-card-header: 以及与mat-card-header相关的CSS:
.mat-card {
padding: 0;
}
.mat-card-header {
background-color: rgb(42, 5, 128);
color: white;
padding: 25px 5px 25px;
}
After adding fxLayoutGap: 添加fxLayoutGap之后:
<mat-card-header>
<div fxLayout="row" fxLayoutGap="120%">
Like I said, it is not responsive 就像我说的,它没有反应
you can either do it by making your wrapper div fxLayoutAlign 'space-between' 您可以通过使包装器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>
or 要么
giving margin-left: auto
to the div you want to move right 给
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>
and in both cases make wrapper div flex-grow: 1
by providing fxFlex="1 0 0"
并且在两种情况下都通过提供
fxFlex="1 0 0"
使wrapper div flex-grow: 1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.