Question

我需要在左侧和右侧设置标题元素组。

我有类似的东西：

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

和与mat-card-header相关的CSS：

.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%">

就像我说的那样，它没有响应

Answer 1

您可以通过使包装器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>

，在两种情况下，都通过提供flex-grow: 1

来使包装器div fxFlex="1 0 0"

如何在mat-card-header中向左右设置元素组？

1 个答案: