html - How to align groups of buttons on single row with Flex only? -
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 in firefox or chrome:
- edit , delete buttons left-justified on row
- ok , cancel buttons centered on next 2nd row
- help button right-justified on next 3rd row
i expected buttons on same first row first since used span. got same result when replacing spans divs.
i tried changing 'display: flex;' 'display inline-flex;'. buttons appeared on 1 row, justification did not work. buttons appeared 1 after other no spaces justification.
have made mistake in html above? possible justify button groups flex only? if yes, how?
when 1 add display: flex
each item*
, content comes flex items, not item*
themselves.
simply add display: flex; justify-content: space-between
parent
instead, , remove flex properties 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, add display: flex
span
's, become flex container , stop being normal span
's. using inline-flex
end on same row, though stack side-by-side, sized content.
to achieve want inline-flex
, can set each item*
33%, stretch/share full width of parent, though above solution should use.
update based on comment
to center ok/cancel in middle of parent, 1 can make each item*
take 33.333% of parents width setting flex property flex: 1 1 0
, , center/right align middle , right item*
's content.
the first 1
in flex: 1 1 0
tell them flex-grow 1 part each (equally share), , last 0
tell them exclude content before calculate 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 set flex-basis
(last value in flex: 1 1 0
) 100% , let them flex-shrink
equally (the middle value in flex: 1 1 0
), flex: 0 1 100%
Comments
Post a Comment