Fun with Flexbox

I have been doing web development for quite a while and one of the frustrating things we have to deal with in web design is laying out a web page and getting every element to be positioned just as we want it.

Back in the day, we would use floats and absolute positioning to get everything pixel perfect only to find out the layout was broken in Internet Explorer. Today's web world is much different with fluid designs, rem units instead of pixels and grid systems such as CSS grid and Bootstrap.

One relatively new layout feature of CSS3 I have utilized greatly in the past year or so is flexbox. Flexbox is short for flexible box and like the name implies allows you to create a flexible layout for display across platforms and most browsers (eg, Chrome, Firefox, Safari and IE11 and up).

Flexbox is pretty extensive, but some of the basics are aligning children within a parent div after setting the parent to display: flex in your CSS. Then the children items could be set to:

align-content: stretch | flex-start | flex-end

Additionally, you can align items in a flexbox: align-items:

flex-start | flex-end | center | baseline | stretch

One super cool thing I learned in flexbox was center aligning text both vertically and horizontally and it only took me like 5 mins!

By default, flexbox is set to row, but it doesn't have to stay that way. Other properties for flexbox are:

flex-direction: row | row-reverse | column | column-reverse

Other cool things you can do in flexbox are setting the order of items such as divs using the order property.

For example, if you have three child divs within a parent div with the following code: