如何仅使用 Flex 将单行上的按钮组对齐？

Question

如何仅使用 Flex 将单行上的按钮组对齐？

我试过这个：

<html>
<head>
<title>Left, Mid, Right action buttons</title>
<style>
.parent {
  width: 600px;
  background-color: yellow;
}
.itemleft {
  display: flex;
  justify-content: flex-start;
}
.itemcenter {
  display: flex;
  justify-content: center;
}
.itemright {
  display: flex;
  justify-content: flex-end;
}
.bs {
  background-color: green;
  color: white;
  width: 70px;
}
</style>
</head>
<body>
  <div class="parent">
    <span class="itemleft">
      <button class="bs">Edit</button>
      <button class="bs">Delete</button>
    </span>
    <span class="itemcenter">
      <button class="bs">OK</button>
      <button class="bs">Cancel</button>
    </span>
    <span class="itemright">
      <button class="bs">Help</button>
    </span>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

结果在 Firefox 或 Chrome 中运行：

编辑和删除按钮在行上左对齐
OK 和 Cancel 按钮位于 NEXT 2nd 行的中心
帮助按钮在 NEXT 3rd 行右对齐

自从我使用 span 以来，我希望所有按钮都在同一第一行。用 div 替换跨度时，我得到了相同的结果。

我也试过改变'display: flex;' '显示 inline-flex;'。然后所有按钮一起出现在一行，但理由不起作用。按钮一个接一个地出现，没有空格。

我在上面的html中犯了一些错误吗？是否可以仅通过 Flex 来证明按钮组的合理性？如果是，如何？

Answer 1

LGS*_*Son 7

当一个添加display: flex到 each 时item*，弹性项目是它们的内容，而不是item*它们本身。

只需添加display: flex; justify-content: space-between到parent，然后从item*

.parent {
  display: flex;
  justify-content: space-between;
  width: 600px;
  background-color: yellow;
}
.bs {
  background-color: green;
  color: white;
  width: 70px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="parent">
    <span class="itemleft">
      <button class="bs">Edit</button>
      <button class="bs">Delete</button>
    </span>
    <span class="itemcenter">
      <button class="bs">OK</button>
      <button class="bs">Cancel</button>
    </span>
    <span class="itemright">
      <button class="bs">Help</button>
    </span>
  </div>

Run Code Online (Sandbox Code Playgroud)

请注意，一旦您添加display: flex到span's，它们就会变成 flex 容器并不再是普通的span's 。通过使用inline-flex它们将最终在同一行上，尽管它们会并排堆叠，按其内容调整大小。

要使用实现您想要的效果inline-flex，您可以将每个item*设置为 33%，这样它们就可以拉伸/共享其父级的整个宽度，尽管上述解决方案是您应该使用的。

根据评论更新

要将 OK/Cancel 居中在父级中间，可以item*通过将其 flex 属性设置为flex: 1 1 0，使每个占据父级宽度的 33.333% ，然后居中/右对齐 middle 和 rightitem*的内容。

首先1在flex: 1 1 0告诉他们弯曲长出每个（平等共享）的一部分，最后0告诉他们之前，计算出其排除其内容柔性长出大小。

.parent {
  display: flex;
  width: 600px;
  background-color: yellow;
}
.bs {
  background-color: green;
  color: white;
  width: 70px;
}
.parent > span {
  flex: 1 1 0;
}
.parent .itemcenter {
  text-align: center;
}
.parent .itemright {
  text-align: right;
}

Run Code Online (Sandbox Code Playgroud)

<div class="parent">
    <span class="itemleft">
      <button class="bs">Edit</button>
      <button class="bs">Delete</button>
    </span>
    <span class="itemcenter">
      <button class="bs">OK</button>
      <button class="bs">Cancel</button>
    </span>
    <span class="itemright">
      <button class="bs">Help</button>
    </span>
  </div>

Run Code Online (Sandbox Code Playgroud)

另一种选择是将它们的flex-basis（中的最后一个值flex: 1 1 0）设置为 100%，然后让它们flex-shrink相等（中的中间值flex: 1 1 0），就像这样flex: 0 1 100%

归档时间：	8 年，5 月前
查看次数：	13768 次
最近记录：	8 年，5 月前