如何仅使用 Flex 将单行上的按钮组对齐? [英] How to align groups of buttons on single row with Flex only?

查看：13
本文介绍了如何仅使用 Flex 将单行上的按钮组对齐?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试过了:

<头><title>左、中、右动作按钮</title><风格>.父母{宽度:600px；背景颜色:黄色；}.itemleft {显示:弹性；justify-content: flex-start;}.itemcenter {显示:弹性；对齐内容:居中；}.itemright {显示:弹性；justify-content: flex-end;}.bs {背景颜色:绿色；白颜色;宽度:70px；}</风格><身体><div class="parent"><span class="itemleft"><button class="bs">编辑</button><button class="bs">删除</button></span><span class="itemcenter"><button class="bs">OK</button><button class="bs">取消</button></span><span class="itemright"><button class="bs">帮助</button></span>

在 Firefox 或 Chrome 中运行的结果:

  • 编辑和删除按钮在行上左对齐
  • 确定和取消按钮位于 NEXT 2nd 行的中心
  • 帮助按钮在 NEXT 3rd 行右对齐

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

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

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

解决方案

当一个 display: flex 添加到每个 item* 时，就是它们的内容来 flex项，而不是 item* 本身.

只需添加 display: flex;justify-content: space-between 改为 parent，并从 item*

中删除 flex 属性

.parent {显示:弹性；对齐内容:间隔；宽度:600px；背景颜色:黄色；}.bs {背景颜色:绿色；白颜色;宽度:70px；}

<span class="itemleft"><button class="bs">编辑</button><button class="bs">删除</button></span><span class="itemcenter"><button class="bs">OK</button><button class="bs">取消</button></span><span class="itemright"><button class="bs">帮助</button></span>

<小时>

注意，一旦你将 display: flex 添加到 span 中，它们就会变成 flex 容器并且不再是正常的 span's.通过使用 inline-flex，它们最终将位于同一行，但它们会并排堆叠，按其内容调整大小.

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

<小时>

根据评论更新

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

flex: 1 1 0 中的第一个 1 告诉他们 flex-grow 每个部分(均分)，最后一个0 告诉他们在计算他们的 flex-grow 大小之前排除他们的内容.

.parent {显示:弹性；宽度:600px；背景颜色:黄色；}.bs {背景颜色:绿色；白颜色;宽度:70px；}.parent >跨度 {弹性:1 1 0；}.parent .itemcenter {文本对齐:居中；}.parent .itemright {文本对齐:右；}

<span class="itemleft"><button class="bs">编辑</button><button class="bs">删除</button></span><span class="itemcenter"><button class="bs">OK</button><button class="bs">取消</button></span><span class="itemright"><button class="bs">帮助</button></span>

另一种选择是将他们的 flex-basis(flex: 1 1 0 中的最后一个值)设置为 100%，然后让他们 flex-shrink 同样(flex: 1 1 0 中的中间值)，像这样 flex: 0 1 100%

I tried this:

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

Result running this in Firefox or Chrome:

  • Edit and Delete buttons are left-justified on the row
  • OK and Cancel buttons are centered on NEXT 2nd row
  • Help button is right-justified on NEXT 3rd row

I expected all buttons on the same first row first since I used span. I got same result when replacing the spans with divs.

I also tried changing 'display: flex;' to 'display inline-flex;'. Then all buttons appeared together on one row, but the justification did not work. The buttons appeared one after the other with no spaces for justification.

Have I made some mistake in the html above? Is it possible to justify the button groups by Flex only? If yes, how?

解决方案

When one add display: flex to each item*, it is their content that be comes flex items, not the item* themselves.

Simply add display: flex; justify-content: space-between to the parent instead, and remove the flex properties from the item*

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

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

Note, as soon as you add display: flex to the span's, they become flex container and stop being normal span's. By using inline-flex they will end up on the same row, though they will stack side-by-side, sized by their content.

To achieve what you want with inline-flex, you can set each item* to be 33%, so they stretch/share the full width of their parent, though the above solution is what you should use.

Update based on a comment

To center the OK/Cancel in the middle of the parent, one can make each item* take 33.333% of the parents width by setting its flex property to flex: 1 1 0, and then center/right align the middle and right item*'s content.

The first 1 in flex: 1 1 0 tell them to flex-grow one part each (equally share), and the last 0 tell them to exclude their content before calculate their flex-grow size.

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

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

Another option would be to set their flex-basis (last value in flex: 1 1 0) to 100% and then let them flex-shrink equally (the middle value in flex: 1 1 0), like this flex: 0 1 100%

这篇关于如何仅使用 Flex 将单行上的按钮组对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆