Positioning items is one of the most important aspects of CSS and making sure items are where you want them on devices and browsers of all shapes and sizes. The last thing you need on your website is an item to be overlapping your buy button because it wasn’t mobile optimized. Before, positioning an item with a set pixel distance of 50px from the edge of the screen worked fairly well when most screens were generally the same size. Now with most of the traffic websites see coming from mobile devices, that’s no longer is the case and CSS needed to adjust to those changes.
It may have taken a while for all the main browsers to support Flexbox (looking at you IE) but it was worth the wait. I personally started using it when it was just supported by Chrome and Firefox with fallbacks for the other browsers but now that’s not really necessary, unless of course you want to accommodate the 80-year-old grandma still of her Dell computer from 20 years ago.
Flexbox makes positioning items SO MUCH EASIER, no more set padding and margin to position correctly for different browsers, let Flexbox handle the heavy lifting! There are quite a few nifty little Flexbox CSS attributes which will save you hundreds of lines of code of a few things to keep in mind.
Items MUST be display: flex;
Nested divs are key
Test in Browser Inspector
Will move items HORIZONTALLY: center, left or right (listed as such)
justify-content: space-around; justify-content: flex-start; justify-content: flex-end;
Will move items VERTICALLY: center, left or right (listed as such)
align-items: center; align-items: flex-start; align-items: flex-end;
Once you get used to it, you will realize how awesome Flexbox is and how much less hair you will pull out while using CSS!
Check out the video below for a more in-depth overview for the Zero to Startup in 30 Days Challenge.
Written by Tim Moreton who lives and works
in Philadelphia building useful things.