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

我从这个答案开始，并尝试使用提供的纯flexbox答案

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

我不知道为什么按钮4在行中显示得比其他元素高

HTML

结果:

编辑：

在my style.css中，下面的一行可能是问题的原因

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

---

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

B'z因为您使用的是

display:flex

你应该用这种简单的方法
添加
最大宽度：537px进入
.customFlexContainer
类

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


.customFlexContainer{
显示器：flex；
证明内容：之间的空间；
身高：0%；
对齐内容：居中对齐；
最大宽度：537px；
}
钮扣{
保证金：5px；
}

搜寻
按钮1
按钮2
按钮3
按钮4
你能试试这样的方法吗：


.customFlexContainer{
显示器：flex；
证明内容：之间的空间；
身高：0%；
对齐项目：居中；
}
钮扣{
保证金：5px；
}

搜寻
按钮1
按钮2
按钮3
按钮4
我通过执行以下操作解决了此问题：

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

因为这是
之间的空格
应该做的，所以它将flex容器中的2个div作为它的子对象，并在它们之间分配空格，将它们推到两端。你能发布你的实际css吗，因为如果我删除了justify内容，并且没有多余的空间放最后一个项目，那么你当前的css似乎可以工作，我会继续挖掘，但这就是该组件的css。它一定是在另一个我不期望的设置中使用的。@导入“~@angular/material/prebuilded themes/deeppurple amber.css”*似乎与此有一些冲突…这不起作用，它只是将按钮4向左拉了更多，但仍然升起。尽管如此，我还是希望按钮4一直在左边，我；我只是不知道为什么水平方向不一样。当使用角度材质预定义主题时，它不起作用。更接近，但仍然不起作用。正如我所说，这在没有角度预定义主题的情况下是可行的，但我的解决方案是利用主题。你能为此创建代码沙盒吗？我认为主题不应该造成这个问题
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";*

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

.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;
}