This is the very start of a new HTML and CSS Tricks series with one of our best-selling instructors, Ryan Bonhardt. Together with Ryan we’ll be sharing actionable tips and tricks you can immidiately start using when working with HTML and CSS.
This time, Ryan gives easy tips on how to use flexbox.
Make complex website layouts simple with Flexbox
Absolute, relative and fixed positioning, negative margins, float, clears, and inline-blocks. Just this list alone gives me a nostalgic sense of suffocation and makes HTML and CSS newbies freeze in fright. For decades designers and front-end developers have struggled, hacked, and tortured their way through using these CSS properties to simply try and make their websites display across browsers and screen sizes the way they want them to.
But struggle no more! Because we now have flexbox; possibly the best thing to happen to layouts, since… no not sliced bread. No, better than that, possibly since CSS itself. With flexbox you can now laugh in the face of complex layouts and responsive designs as you battle the evils of differing screen sizes and browsers with your new trusty sidekick!
The 💜 of EU tech
The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!
Flexbox makes it easy to make layouts exactly as you want them. You can distribute HTML items in a row or column. Push them flush to one side, evenly distributed across the container, or center them on both the vertical and horizontal axis. It automatically makes your items and layouts responsive. And you can even use it to reorder items and say how much they grow or shrink at different screen sizes. All with only a few lines of CSS.
There’s so much flexibility (no pun intended) and power with flexbox that it wouldn’t do it justice unless I showed you. In this weeks edition of HTML & CSS Tricks I’m going to walk you through exactly how easy it is to use flexbox in order to create a simple navbar with multiple list elements in 7 simple steps. And in the process we’ll cover some bonuses: Emmet, child element pseudo-classes, and Autoprefixer.
Open up to the new beautiful world of site layouts with flexbox and watch the video above.
Resources:
- CSS Tricks – “A Complete Guide To Flexbox”
- Scotch.io’s – A Visual Guide to CSS3 Flexbox Properties
- CanIUse.com
- Eric Meye’s CSS Reset
- Sublime’s AutoPrefixer Package
- Emmet
Like this video and want to learn more? There are 2 things you can do:
- Check out Ryan’s online course in our Academy
- And leave a comment about what you’d like him to cover next
Get the TNW newsletter
Get the most important tech news in your inbox each week.