Flexbox: The Front-End Savior for a Back-End Developer

Dan Sudenfield

blog header image

Many back-end developers get writers block when they try to make a responsive front-end website in CSS. Maybe it’s a left-brain right-brain thing, but for a back-end developer, styling the front-end can feel like writing with your off hand.

Something about CSS positioning, and knowing when to use absolute versus relative gets muddled and confused. A developer can understand the concept of the two positionings, but in practice getting more complicated layouts and overlays to work is like pulling teeth, and they are not alone. Articles like 10 Reasons Why CSS Sucks perfectly lays out some of my everyday struggles with CSS.

...Until now, enter flexbox.

Flexbox is CSS positioning the way humans actually think about a web page. Flexbox is defined on a container. Properties are then set on the container which determine the position of all children, or on the children to determine their positioning inside the container.

Now that sounds like something that developers can actually use! Flexbox can also help with the spacing of the children. One simple CSS property:

justify-content: space-around;

That gives equal amount of space between each child. How many lines of css would that take without using flexbox? It doesn’t matter because you never have to go back to position absolute and relative again.

The only caveat is that flexbox works exclusively with modern browsers. So it hardly works in IE11, offering only ‘partial support.’

Take a look at the site Can I Use and the known issues bar to see if flexbox is something you can use on your next site. Just because not all browsers have perfect support for flexbox, doesn’t mean you shouldn’t use it. Flexbox is getting more popular every day, and the support will get better with each update.

headshot

Dan Sudenfield

Developer

Technology