证明内容在按钮上无法正常工作

Question

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

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

此外，您写到 justify-content: space-between 不起作用，但在您的代码中您有 justify-content: center (?)。我在代码片段中将其更改为 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，这也会在最右边和最左边留下一些 space：

.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

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

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

证明内容在按钮上无法正常工作

justify-content not working properly on buttons

html

css

sass

flexbox

angular