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

Question

我在父容器中嵌套了 3 个按钮。父容器有display:inline-flex，但justify-content: space-between 属性不起作用。这些按钮定义了max-width（因为justify-content 只能在有可用空间时工作）。此时，当我为justify-content（space-between、space-around、center 等）尝试不同的值时，按钮的分组会四处移动，但各个按钮永远不会分开。我已经对此进行了一段时间的修改，并阅读了一堆 StackOverflow 答案，但到目前为止没有任何效果。任何帮助表示赞赏！ 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>

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

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