What The Flexbox? - Day 10

While their are a million programming languages to essentially do the same thing from Javascript, Ruby, Python, etc., their is really only so many ways to style a webpage and they all end with CSS. It seems like a new programming language comes out everyday but CSS has remained largely unchanged since the 90’s. Just think how much the devices we view websites on have changed and improved since then. Whether you have programmed before or not it’s pretty obvious that there would be some issues applying that to today’s vast amount of browsers and devices. Sure it still works with every website still using CSS in some degree, but programmers certainly know there are some huge annoyances with CSS.

Biggest Annoyance w/ CSS?

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.

Enter Sandman (sorry bad Metallica reference)

Enter Flexbox!

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.

Key Takeaways

  • Items MUST be display: flex;

    • The default is display: block; on either the element you want to position or the parent item in order for the other Flexbox attributes to work correctly.
  • Nested divs are key

    • Just displaying flex on an item with multiple lines of text will throw everything off wack, it’s better to keep the parent item flex and child item any respective flexbox attribute
  • Test in Browser Inspector

    • There are a ton of Flexbox tricks so best way to learn is just test them all out in the browser but below are three you will almost always use

3 Important Flexbox Attributes

REQUIRED

display: flex;

Justify-Content (Horizontal)

Will move items HORIZONTALLY: center, left or right (listed as such)

justify-content: space-around;
justify-content: flex-start;
justify-content: flex-end;

Align-Items (Vertical)

Will move items VERTICALLY: center, left or right (listed as such)

align-items: center;
align-items: flex-start;
align-items: flex-end;

Conclusion

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.

What The Flexbox?

Coming Tomorrow -----> Free Stock Photography!?

Want To Learn How To Turn Your Ideas Into Code?


Written by Tim Moreton who lives and works
in Philadelphia building useful things.