Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

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.

Updated Series Available

You are viewing an archived course. We instead recommend that you watch CSS Flexbox Simplified.

View Updated Series

Progress

Series Info

Episodes
8
Run Time
1h 12m
Difficulty
Intermediate
Last Updated
Sep 27, 2016
Version
Latest
Play Series

Series Episodes

  1. Episodes (8)

    1. A Perfectly Centered Logo

      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.

    2. 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.

    3. 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.

    4. 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.

    5. 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.

    6. 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.

    7. 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.

    8. 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.

Continue Learning

JavaScript Essentials for PHP Developers thumbnail

JavaScript Essentials for PHP Developers

With Jeremy McPeak

Unlock the power of JavaScript with this tailored series designed for PHP developers looking to expand their skills. Learn key concepts, syntax, and practical applications to seamlessly transition from server-side to client-side coding.

  • 35 Episodes
Object-Oriented Principles in PHP thumbnail

Object-Oriented Principles in PHP

With Jeffrey Way

Beginning developers are usually first introduced to procedural programming. But, before too long, they level up. Suddenly, an entirely different paradigm is introduced: object-oriented programming. Little do they know that they'll spend years researching and learning exactly what it means to work with objects and messages. In this course, you'll be introduced to the core principles of object-oriented programming through the lens of PHP. We'll begin with the basic constructs and work our way up. The only prerequisite is an elementary understanding of the PHP language and syntax.

  • 10 Episodes
PHP For Beginners thumbnail

PHP For Beginners

With Jeffrey Way

We all start somewhere. For programming, this series is that first step. I've designed it specifically for newcomers to, not just PHP, but programming in general. Here, you'll learn the fundamentals of PHP - all the way down to defining basic variables and arrays.Think of this series as a key stepping stone for your programming journey.

  • 50 Episodes
JavaScript: The First Steps thumbnail

JavaScript: The First Steps

With Andre Madarang

JavaScript is one of the most popular and versatile programming languages when working on the web. It makes for a great first language to learn as you can get started with any web browser and its built-in devtools.This beginner-focused series will take you through the fundamentals of JavaScript and give you a solid understanding of how the language works. Once the fundamentals are under your belt, you should be comfortable writing JavaScript in your own applications or continue your JavaScript journey by learning new frameworks or technologies that are built on top of it.

  • 30 Episodes
CSS Flexbox Simplified thumbnail

CSS Flexbox Simplified

With Shruti Balasa

Flexbox is no longer an advanced topic in CSS. Today, it's an essential tool for styling modern web pages. In this course, we'll use a variety of real-world examples and components to explore all of the CSS properties related to flexbox. These examples will help you to better understand the core concepts and commit them to memory.

  • 12 Episodes