Css Tip – Using flexbox to style a button

When you try to use flexbox in a button, it doesn’t render as it is supposed to , why is this so, and how do I fix this?

Introduction

The flexbox model is one of the up and coming standards for web design. Once you have mastered it, you can use it for any design you want.

You would expect that it should work on different HTML elements as well, but when you try to apply the model to a button and render it in Firefox, it just wouldn’t render properly. (click on caption to view codepen)

How it appears
how it looks like

How it is supposed to look like
how it supposed to look

As a good developer ensuring cross browser compatibility, this problem annoys me to no end.

Solution (inline block)

In the particular example above where we try to style the button, we could render the image and text as inline block. In that case, the image and text will align side by side.

But using this method, you won’t be able to easily get the image and text to align vertically (unless you use some margin or valign hack, which complicate stuff).

The more generic method

I didn’t believe it could work until I tried it out, the solution seems too simple. Apparently, by wrapping the button’s content with a “div” element, you can render the flexbox properly without any problems.

This way, you can still use flexbox for all your layout needs. But do note that having a content wrapper means that you have to remember to remove the background and border of your button to get the look that you want.

Why didn’t it work originally?

It all boils down to how the button is implemented in Firefox. For special elements, like buttons and form inputs, its safer to assume that structured differently across browsers.

This is because these special elements have unique responses that the browser have to take into consideration, so they are often rendered differently cross browser.

If you are searching for a more technical answer, you can use this thread as a starting point.

Any questions or issues, you can leave a comment here, or direct your query to my email.