Menu
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:
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?
569
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%
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
