Question

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

但是，当我尝试此操作时，会看到以下结果。

我不确定为什么按钮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。

Answer 2

您使用display: flex;

您应该使用这种简单的方法将max-width: 537px;添加到.customFlexContainer类中

希望此帮助。让我知道进一步的澄清。

    .customFlexContainer {
  display: flex;
  justify-content: space-between;
  height: 0%;
  align-content: center;
      max-width: 537px;
}

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>

Answer 3

我能够通过以下操作解决此问题：

  <div class="customFlexContainerNoSpace">
    <div>
      <mat-form-field>
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search" #searchString />
      </mat-form-field>
    </div>
    <div class="customFlexContainer flexGrow3">
      <div>
        <button color="primary" mat-button #searchButton>Button 1</button>
        <button color="primary" mat-button>Button 2</button>
        <button color="primary" mat-button>Button 3</button>
      </div>
      <div>
        <button class="goRight" mat-button color="primary">Button 4</button>
      </div>
    </div>
  </div>

CSS

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

.customFlexContainerNoSpace {
  display: flex;  
  height: 0%;
  align-items: center;
}

.flexGrow3 {
  flex-grow: 3;
}

button {
  margin-left: 5px;  
}

.goRight {
  align-self: flex-end;
}

Flex：对齐将按钮向右对齐，内容向左对齐

3 个答案: