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

Browse all series

CSS Flexbox Simplified

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.

Progress

Series Info

Episodes
12
Run Time
1h 29m
Difficulty
Beginner
Last Updated
May 9, 2023
Version
Latest
Play Series

Series Episodes

  1. Episodes (12)

    1. First Look at CSS Flexbox

      Flexbox is a crucial tool for styling modern web pages, making it easy to create flexible layouts with minimal code. In the tutorial, I'll demonstrate how to create a horizontal navigation menu and a testimonial section with varying widths and heights.

    2. Spacing and Alignment

      In this tutorial, you'll learn how to use CSS Flexbox to create a navigation menu. We'll discuss the use of the gap property for spacing between elements, the justify-content property for horizontal alignment, and the align-items property for vertical alignment.

    3. Wrap Items Into Multiple Rows

      Next up, I'll use flexbox to demonstrate how to create a responsive section of dummy logos for various fictional companies. We'll discuss previously reviewed CSS properties, as well as new ones like flex-wrap and align-content.

    4. Cross-Axis Alignment and Flow Direction

      In this episode, we'll use the flex-direction property to allow for responsive layouts. We'll discuss the importance of vertical stacking for mobile devices and utilizing media queries for different screen sizes. Finally, we'll review cross-axis alignment.

    5. Grow and Shrink Flex Items

      There are two CSS properties that help you control the growing or shrinking of flex items: flex-grow and flex-shrink. In this episode, we'll learn how their various values affect the sizing.

    6. The Flex Property Decoded

      The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties. In this episode, we'll learn how to use this flex property to control the sizing of your flex items.

    7. Adjust the Order of HTML Elements

      In this episode, we'll learn how to use the order property to adjust the placement of flex items. This can be particularly useful for responsive layout decisions. Let's have a look!

    8. Aligning Individual Items

      You've learned how to align all items by leveraging flexbox, but in this episode you will see how to modify that alignment for individual items, as well.

    9. Flexbox and Auto Margins: A Powerful Combo

      Let's learn how to utilize auto margins in Flexbox to achieve various alignment effects, including moving a specific flex item, solving the sticky footer problem, and centering elements.

    10. Make a Flex Container Inline

      Next up, in this episode you'll learn how to use inline flex to make a container act as an inline element instead of a block level element.

    11. Test Everything You've Learned About Flexbox

      In this episode, we walk through creating a complete, responsive Flexbox layout for a webpage, focusing on mobile-first design and then adapting it for larger screens using media queries.

    12. Flexbox vs Grid: Which to Choose?

      In this final episode of the series, we discuss the differences between Flexbox and Grid, providing guidelines to help you decide which one to use for different scenarios. This will make your code shorter, more readable, and maintainable.

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 Grids Simplified thumbnail

CSS Grids Simplified

With Shruti Balasa

Grid is one of the most powerful tools in CSS, but also the most confusing one. Once you master creating layouts with CSS grids, you’ll wonder how you lived without it.In this course, we'll use real world examples and layouts to learn about the CSS properties related to grid. Hopefully, by the conclusion of this series, you'll have a much better understanding of the finer details.

  • 12 Episodes