justify-content 在按钮上无法正常工作

Posted 2023-03-05

【中文标题】justify-content 在按钮上无法正常工作

【英文标题】：justify-content not working properly on buttons

【发布时间】：2022-01-19 20:55:15

【问题描述】：

我在父容器中嵌套了 3 个按钮。父容器有display:inline-flex，但justify-content: space-between 属性不起作用。这些按钮定义了max-width（因为justify-content 只能在有可用空间时工作）。此时，当我为justify-content（space-between、space-around、center 等）尝试不同的值时，按钮的分组会四处移动，但各个按钮永远不会分开。我已经对此进行了一段时间的修改，并阅读了一堆 *** 答案，但到目前为止没有任何效果。任何帮助表示赞赏！ I have a codepen for testing things out. 这是我的 Angular 代码的简化版本。

为了完整记录我的问题，这里是生产中的相关代码和屏幕截图：

.loop-container 
  display: inline-flex
  flex-direction: row
  justify-content: space-between
  align-items: center


button 
  height: 30px
  flex: 1


.cancel 
  background-color: red


.home 
  background-color: blue


.small 
  max-width: 75px


.large 
  max-width: 140px
  

<ng-container class="button-container">
  <div class='loop-container'>
    <button class='cancel small'>Cancel</button>
    <button class='home small'>Home</button>
    <button class='cancel large'>Cancel Machine</button>
  </div>
  </ng-container>

【问题讨论】：

flex: 1 在按钮上应用flex-grow: 1，告诉每个项目消耗所有可用空间。因此，父级上的 justify-content 属性将不起作用，因为没有可用空间。

【参考方案1】：

编辑后的答案：不要在弹性容器上使用display: inline-flex，而是使用display: flex。这样弹性容器默认为 100% 宽。

另外，你写了justify-content: space-between 不工作，但在你的代码中你有justify-content: center (?)。我在我的 sn-p 中将其更改为 space-between 以显示效果。

.loop-container 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;


button 
  height: 30px flex: 1


.cancel 
  background-color: red


.home 
  background-color: blue


.small 
  max-width: 75px


.large 
  max-width: 140px

<ng-container class="button-container">
  <div class='loop-container'>
    <button class='cancel small'>Cancel</button>
    <button class='home small'>Home</button>
    <button class='cancel large'>Cancel Machine</button>
  </div>
</ng-container>

您可能还想尝试space-around，它也会在最右边和最左边留下一些空间：

.loop-container 
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;


button 
  height: 30px flex: 1


.cancel 
  background-color: red


.home 
  background-color: blue


.small 
  max-width: 75px


.large 
  max-width: 140px

<ng-container class="button-container">
  <div class='loop-container'>
    <button class='cancel small'>Cancel</button>
    <button class='home small'>Home</button>
    <button class='cancel large'>Cancel Machine</button>
  </div>
</ng-container>

【讨论】：

我之前也这样做过，但是按钮没有对齐。它也没有解决问题。 inline-flex 应该仍然允许我使用 flex 属性，但保持按钮内联。不过谢谢！

请注意我的答案的编辑

是的，我将justify-content: center 作为生产中的临时占位符，因为它看起来比其他选项更好。我将显示更改为 flex，但它只将按钮一个在另一个之上，并且它们需要内联。空格也可以，但同样，它只是将按钮一起移动，而不是将它们分开。

对我来说，生产中肯定发生了其他事情，因为我在你的例子中看到它做了它应该做的事情。我标记这个是正确的。只需要弄清楚我的生产代码还有哪些其他样式。谢谢@Johannes！

【参考方案2】：

如果您希望所有按钮之间有间隙，则必须添加边距，对齐内容不会在元素之间添加空格，它只是根据您的属性值移动内容。

.loop-container 
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;


button 
  height: 30px;
  flex: 1;
  white-space: nowrap;
  margin-right: 0.25rem;


button:last-child 
  margin-right: 0;


.cancel 
  background-color: red;


.home 
  background-color: blue;


.small 
  max-width: 75px;


.large 
  max-width: 140px;

<ng-container class="button-container">
  <div class='loop-container'>
    <button class='cancel small'>Cancel</button>
    <button class='home small'>Home</button>
    <button class='cancel large'>Cancel Machine</button>
  </div>
</ng-container>

【讨论】：

我不想添加边距，因为这需要在不同的屏幕上灵活。可以使用 flex 和justify-content: space-between 来分隔元素，因为我之前已经做过很多次了。不知道为什么它在这种情况下不起作用。 css-tricks.com/almanac/properties/j/justify-content

因为您使用的是 inline-flex，所以 inline-flex 不会为内部内容留下任何消耗空间。即使在您的参考文献中。您可以使用display: flex; 在演示创建者中看到的链接，然后内部内容将与剩余空间对齐。如果在该演示中设置display: inline-flex，您将看到与演示中相同的内容。

当我使用display: flex 时，按钮不再是内联的。 justify-content 在这种情况下仍然无法正常工作。

我不确定你所说的内联按钮是什么意思，但如果你正在寻找在使用 display flex 时显示在左侧的按钮，那么你使用 justify-content: flex-start; justify-content: center; 将证明所有内容到中心。我认为您只是对 justify-content 的使用感到困惑。

内联 === 同一行。