如何使用Flex对齐单行按钮组？ [英] How to align groups of buttons on single row with Flex only?
问题描述
我试过这个：
< html>
< head>
< title>左，中，右操作按钮< / 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;
颜色：白色;
width：70px;
}
< / style>
< / head>
< body>
< div class =parent>
< span class =itemleft>
< button class =bs>编辑< / button>
< button class =bs>删除< /按钮>
< / span>
< span class =itemcenter>
< button class =bs>确定< / button>
< button class =bs>取消< /按钮>
< / span>
< span class =itemright>
< button class =bs>帮助< / button>
< / span>
< / div>
< / body>
< / html>
在Firefox或Chrome中运行此结果：
<确定并取消按钮位于第二行的下一行
因为我使用了span，所以我预计同一行的所有按钮都是第一行。
当使用div替换跨度时，我得到了相同的结果。
我也试着将'display：flex'改为'display inline-flex;'。然后所有的按钮一起出现在一行，但是说明理由不起作用。按钮一个接一个地出现，没有空间可以调整。
我在上面的html中犯了一些错误吗？
是否可以通过Flex来验证按钮组？如果是的话，怎么样？
当添加 display：flex 每个项* ，它们的内容是来自flex项目，而不是 item * 本身。
只需添加 display：flex;在> 父母> 项目中删除flex属性。 c $ c
.parent {display：flex;证明内容：空间之间;宽度：600px; background-color：yellow;}。bs {background-color：green;白颜色; width：70px;}
< div class =parent > < span class =itemleft> < button class =bs>编辑< / button> < button class =bs>删除< /按钮> < /跨度> < span class =itemcenter> < button class =bs>确定< /按钮> < button class =bs>取消< / button> < /跨度> < span class =itemright> < button class =bs>帮助< / button> < /跨度> < / div>
注意，只要将 display：flex 添加到 span 中，它们就会变成flex容器，停止正常 span 的。通过使用 inline-flex ，它们将在同一行上结束，尽管它们将并排堆叠，并且由它们的内容决定。
使用 inline-flex 来达到你想要的效果，你可以设置每个项目为是33％，所以他们伸展/分享他们的父母的全长，尽管上面的解决方案是你应该使用的。
更新基于评论
要在父母的中间确定/取消中心，可以使每个项目通过将其flex属性设置为 flex：1 1 0 ，获得父母宽度的33.333％，然后居中/右对齐中间和右侧<$ c $ <$ c $>
第一个 1 位于 flex：1 1 0 告诉他们每个flex-grow 一个部分（等份），最后一个 0 告诉他们在计算它们的
$ b
.parent {display：flex;宽度：600px; background-color：yellow;}。bs {background-color：green;白颜色; width：70px;}。parent> span {flex：1 1 0;}。parent .itemcenter {text-align：center;}。parent .itemright {text-align：right;} =snippet-code-html lang-html prettyprint-override> < div class =parent> < span class =itemleft> < button class =bs>编辑< / button> < button class =bs>删除< /按钮> < /跨度> < span class =itemcenter> < button class =bs>确定< /按钮> < button class =bs>取消< / button> < /跨度> < span class =itemright> < button class =bs>帮助< / button> < /跨度> < / div>
将它们的 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屋！
