{"id":2555,"date":"2024-09-05T18:00:30","date_gmt":"2024-09-05T21:00:30","guid":{"rendered":"https:\/\/benjaminray.com\/codebase\/?p=2555"},"modified":"2024-09-05T17:40:06","modified_gmt":"2024-09-05T20:40:06","slug":"center-flexbox-column-between-two-variable-width-columns-common-toolbar-scenario","status":"publish","type":"post","link":"https:\/\/benjaminray.com\/codebase\/center-flexbox-column-between-two-variable-width-columns-common-toolbar-scenario\/","title":{"rendered":"Center Flexbox Column Between Two Variable-Width Columns (Common Toolbar Scenario)"},"content":{"rendered":"

The Issue<\/h2>\n

I often run into the scenario where I'm building a toolbar with items on the left, in the middle, and on the right. The items on the left and right can often be of varying width, and as their widths change dynamically, the item in the middle moves to the left or right while it centers itself between the outer edge of the left\/right items.<\/p>\n

For example, a toolbar with some buttons on the left, a date input in the middle, and a message on the right might look like this:<\/p>\n

\"An<\/p>\n

But if there is only one button and a really long message, the date input shifts more to the left:<\/p>\n

\"An<\/p>\n

This is not a great user experience, especially if the outer column widths change dynamically.<\/p>\n

\nHTML\/CSS Before Applying Solution<\/summary>\n
.toolbar {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n<\/code><\/pre>\n
<div class=\"toolbar\">\n  <div class=\"button-col\">\n    <button>New Event<\/button>\n    <button>Edit<\/button>\n    <button>Copy<\/button>\n  <\/div>\n  <input type=\"date\" value=\"2024-08-01\" \/>\n  <div class=\"message-col\">\n    <span>\u2713 Event saved!<\/span>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n<\/details>\n
 <\/p>\n
The Solution<\/h2>\n
We can easily solve this one by applying flex-grow: 1<\/code> and flex-basis: 0<\/code> to the outer columns as follows:<\/p>\n
.toolbar {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.button-col,\n.message-col {\n  flex-grow: 1; \/* See here *\/\n  flex-basis: 0; \/* And here *\/\n}\n<\/code><\/pre>\n
<div class=\"toolbar\">\n  <div class=\"button-col\">\n    <button>New Event<\/button>\n    <button>Edit<\/button>\n    <button>Copy<\/button>\n  <\/div>\n  <input type=\"date\" value=\"2024-08-01\" \/>\n  <div class=\"message-col\">\n    <span>\u2713 Event saved!<\/span>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
And now our date input is centered, regardless of the width of the outer columns!<\/p>\n
\"An<\/p>\n
\"An<\/p>\n
Dealing With Wrapping<\/h2>\n
On smaller screens, the outer columns will start to wrap when they bump up against the center column. You can set different flex-grow values at different screen widths to optimize the behaviour. You can also set  white-space: nowrap<\/code> on a specific column (e.g. the buttons column) to prevent it from wrapping, which pushes the wrapping behaviour to the other column (e.g. the messages column).<\/p>\n
Credit:<\/h2>\n