Fun with Flexbox

May 14, 2018

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:


I am a lonely first child

I am a second child

I am a third child

I am a fourth child


If you want to change the order of the display of the "child4" class simply in the CSS add:


.child4{
order:1;
}

And voila! .child4 will then move into the first position.

These are just a few basic easy aligning that can be done via flexbox. There are many more capabilities that flexbox can do. CSS-Tricks has a really good Flexbox tutorial.

Author

  • Bruce Gilbert

    I am a web developer and blogger living in Durham, North Carolina. Technical specialties include WordPress and Drupal Development, HTML5, CSS3, jQuery, PHP and MySQL. I also dabble in SEO. When I am not working on websites or SEO I enjoy music, art, sports, movies, and being a foodie.

Leave a Reply

Your email address will not be published. Required fields are marked *

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram