Intermediate

Learn Flexbox Through Examples

Flexbox is easily one of the most important additions to CSS in the last decade. The only problem is that there's a bit of a learning curve. Trust me, though: you want to learn this. And once you have, you'll be singing its praises to anyone who will listen. I guarantee it.

Start Series For Free

Share this series on:

  • 01

    Episode 1 Run Time 4:15

    A Perfectly Centered Logo Free

    Front-end designers have been joking about this for years. How again are you supposed to horizontally and vertically center a bit of content on the page? Before flexbox, it was kind of tough! No joke. Luckily, this is no longer the case. It's the easiest thing in the world now.

    View the source for this episode on GitHub.

  • 02

    Episode 2 Run Time 6:49

    A Navigation Menu

    For step two of your flexbox crash-course, we'll create a typical navigation menu, and then use flexbox to evenly distribute each item with perfect precision.

    View the source for this episode on GitHub.

  • 03

    Episode 3 Run Time 8:49

    The Bread and Butter Layout

    Consider the most typical of website layouts: a head at the top, a main section - possible consisting of a sidebar and primary content - in the middle, and then a footer stuck to the bottom. Traditionally, we've used floats to accomplish this layout. But the truth is that floats were never truly meant for this sort of thing. Luckily, again, there's a better way. In this episode, we'll discuss the justify-content property more, while reviewing the margin-top: auto trick.

    View the source for this episode on GitHub.

  • 04

    Episode 4 Run Time 8:18

    An Episode List

    Let's use flexbox to design the layout for a very simple component that displays a list of episodes in a series. The key lesson for this video is to understand that flexbox is not exclusively for grids and layout. It's useful for even small adjustments.

    View the source for this episode on GitHub.

  • 05

    Episode 5 Run Time 10:18

    Media Objects with Flexbox

    A media object is an incredibly simple component that you'll find uses for in countless spots in a typical website. The most obvious example is a Facebook status: a user's thumbnail on the left, and possibly a name and message on the right. In this video, we'll build two examples of this very thing, while leveraging flexbox.
  • 06

    Episode 6 Run Time 15:57

    Flexible Grids in Seconds

    Traditional CSS grids are painful to write. In fact, they're so painful to the point that most developers simply reach for a dedicated CSS framework that has all the kinks and bugs worked out. However, with flexbox, it's laughably simple. Seriously - you'll laugh when you see how easy it is to dynamically create any arrangement of columns.

    View the source for this episode on GitHub.

  • 07

    Episode 7 Run Time 5:28

    Sectioned Navigation

    Let's build a navigation menu that requires main links on the left, social network links in the middle, and login/logout links on the far right side. Again, in the last, we would need to defer to awkward floats to accomplish this. But not anymore.
  • 08

    Episode 8 Run Time 12:31

    Form Add-Ons

    Imagine lining up a form input, icon, and button; it's really annoying, right? Every single time, it ends up being a confusing mess. "Wait, why is this padding not matching up with the inputs?" But, with flexbox, all of that is out the window. I feel like a record on repeat at this point, but it genuinely couldn't be simpler.

    View the source for this episode on GitHub.