Flexbox

| 1 min read

Flexbox

I've been interested in newer web technologies lately due to my recent work assignment. I'm not a designer per se so when I started to design this site, I've fallen back to using Bootstrap and use its built-in styles to quickly bring up the site. Not a bad idea for an initial conception, but as time goes by I've been wanting to get my hands dirty.

What is Flexbox?

From MDN:

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.*

That's right. It's an improvement from the age-old way of doing layout for your sites.

I think for me, one of the main reasons why I love Flexbox is that it's very easy to conceptualize in your head, and is very easy to reason with, especially with the CSS properties that came with it.

For example, do you want the contents of your Flexbox to wrap when it overflows? Just add flex-wrap: wrap to your stylesheet. Do you want to center content horizontally and vertically? Just add align-items: center and justify-content: center and be done with it.

It's this familiarity, and albeit English-like grammar of the properties that makes it really useful and painless to use. Try using them on your site whenever you can. You can simplify a lot of code just by using Flexbox. I know I did.