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

Posted 2023-03-06

【中文标题】Flex：对齐按钮向右对齐，内容向左对齐

【英文标题】：Flex: Aligning align a button to the right and content to the left

【发布时间】：2019-01-16 00:33:53

【问题描述】：

我从这个 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";*

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

【问题讨论】：

因为这是 space-between 应该做的，它将 flex 容器内的 2 个 div 视为其子级，并在它们之间分配空间，将它们推向两端。

你能发布你的实际 css，因为如果我只是删除 justify-content 并且最后一项没有额外空间，你当前的 css 似乎可以工作

我会继续挖掘，但这就是该组件的 css。它一定是在我没想到的地方选择了另一个设置。

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";* 这似乎有些冲突...

【参考方案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。

【讨论】：

更接近但仍然不起作用。正如我所说，这在没有角度预定义主题的情况下有效，但我的解决方案是使用主题。

你能为此创建代码沙箱吗？我不认为主题应该造成这个问题

【参考方案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>

【讨论】：

这不起作用，它只是将按钮 4 向左拉了一点，但它仍然被抬起。话虽如此，我确实想要按钮 4 一直到左边，我只是不确定为什么它在水平方向上不一样。

在使用 angular material 预定义主题时不起作用。

【参考方案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;