html - 柔性 : Aligning align a button to the right and content to the left

Question

我从这个 SO 开始答案，我试图使用提供的纯 flexbox 答案。

然而，当我尝试这个时，我看到了以下结果。

我不确定为什么 Button 4 在行中出现的位置高于其余元素。

HTML

  <div class="customFlexContainer">
    <div>
      <mat-form-field>
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search" #searchString />
      </mat-form-field>


      <button color="primary" mat-button >Button 1</button>
      <button color="primary" mat-button (click)="doSomething()">Button 2</button>
      <button color="primary" mat-button (click)="doSomething()">Button 3</button>
    </div>
    <div>
      <button mat-button color="primary" (click)="do2()">Button 4</button>
    </div>

  </div>

CSS

.customFlexContainer {
  display: flex;
  justify-content: space-between;
  height: 0%;
  align-content: center;
}

button {
  margin: 5px;  
}

结果:

编辑:

在我的 style.css 中，以下行似乎可能是导致问题的原因。

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";*

如果我将其注释掉，它会正确对齐，但页面根本没有样式。

Answer 1

你能试试这样吗:

.customFlexContainer {
  display: flex;
  justify-content: space-between;
  height: 0%;
  align-items: center;
}

button {
  margin: 5px;
}

<div class="customFlexContainer">
  <div>
    <mat-form-field>
      <mat-label>Search</mat-label>
      <input matInput placeholder="Search" #searchString />
    </mat-form-field>


    <button color="primary" mat-button>Button 1</button>
    <button color="primary" mat-button (click)="doSomething()">Button 2</button>
    <button color="primary" mat-button (click)="doSomething()">Button 3</button>
  </div>
  <div>
    <button mat-button color="primary" (click)="do2()">Button 4</button>
  </div>

</div>

您需要使用 align-items: center 而不是 align-content。