What is the difference between `display: flex` and `display: inline-flex` in CSS?

`display: flex` creates a block-level flex container, while `display: inline-flex` creates an inline-level flex container. Both make their direct children flex items.

How do `justify-content`, `align-items`, and `align-content` differ in Flexbox?

`justify-content` aligns items along the main axis, `align-items` aligns items on the cross axis within a line, and `align-content` distributes multiple flex lines on the cross axis.

How can I center an element both vertically and horizontally with Flexbox?

Set the parent to `display: flex`, then use `justify-content: center` and `align-items: center`; give the parent a defined height when vertical centering is needed.

Free online course CSS flexbox tutorial

Duration of the online course: 1 hours and 18 minutes

3.7

(3)

Build responsive layouts faster with this free CSS Flexbox course—master alignment, spacing, and navbars with hands-on practice and a certificate option.

In this free course, learn about

What CSS Flexbox is and when to use it for 1D layout
Flexbox terminology: flex container vs flex items, main axis vs cross axis
How to create flex and inline-flex containers with the display property
How flex-direction controls item placement; default is row
How flex-wrap controls wrapping; default is nowrap
How flex-flow shorthand combines flex-direction and flex-wrap
How justify-content aligns items along main axis; default is flex-start
How align-items aligns items on cross axis; common values and default stretch
How align-content distributes lines in multi-line flex; default is stretch
How order controls visual order; equal order values keep source order between them
How flex-grow, flex-shrink, flex-basis work; defaults 0, 1, auto
How to use the flex shorthand to set grow/shrink/basis efficiently
How align-self overrides align-items per item; default is auto
Practical patterns: responsive navbars and vertical/horizontal centering with Flexbox

About the free online course

Flexbox is one of the most practical tools in modern CSS for building layouts that adapt smoothly to different screens. In this free online course, you will learn how to think in flexible rows and columns so you can create interfaces that stay aligned, evenly spaced, and easy to maintain. Instead of fighting floats and fragile positioning, you will gain a layout workflow that fits real product needs, from simple components to full page sections.

You will start by understanding the core idea behind Flexbox and the key terminology that helps you read and write layout code confidently. From there, the course guides you through the most important container properties, including how direction and wrapping change the way elements flow, and how combined configuration makes your layouts predictable. You will practice making elements distribute space naturally, align neatly along both axes, and behave consistently when content size varies.

Once the foundations are clear, the focus shifts to item-level control. You will learn how ordering works, when growth and shrinking should be allowed, and how sizing is determined when space is limited or abundant. This makes it much easier to build reusable UI pieces where buttons, cards, labels, and images behave well together without constant breakpoint fixes.

The course also emphasizes practical outcomes. You will apply Flexbox to common web development scenarios like responsive navigation bars and reliable centering, including vertical alignment patterns that are frequently used in landing pages and application interfaces. Throughout the lessons and exercises, you will reinforce what each property does and when to use it, helping you move from memorizing syntax to making solid layout decisions. By the end, you will be able to implement clean, responsive layouts with CSS Flexbox and feel confident adapting them to real projects.

Course content

Video class: Flexbox Tutorial - 1 - Introduction 02m
Exercise: What is Flexbox?
Video class: Flexbox Tutorial - 2 - Terminology 02m
Exercise: What are the two entities in flexbox?
Video class: Flexbox Tutorial - 3 - Flex Container Properties 01m
Exercise: What is the property that defines the direction in which the Flex items are placed in the container?

Video class: Flexbox Tutorial - 4 - Flex display 03m
Exercise: What is the value of the display property used to create an inline flex container?
Video class: Flexbox Tutorial - 5 - Flex direction 02m
Exercise: What is the default value of the Flex Direction property?
Video class: Flexbox Tutorial - 6 - Flex wrap 04m
Exercise: What is the default value of the Flex wrap property?
Video class: Flexbox Tutorial - 7 - Flex flow 01m
Exercise: What is the Flex flow property?
Video class: Flexbox Tutorial - 8 - Justify content 05m
Exercise: What is the default value for justify content in a flex container?
Video class: Flexbox Tutorial - 9 - Align items 04m
Exercise: What are the possible values for the "align-items" property in CSS flexbox?
Video class: Flexbox Tutorial - 10 - Align content 04m
Exercise: What is the default value of the align-content property in a flex container?

Video class: Flexbox Tutorial - 11 - Flex item properties 01m
Exercise: Which property controls the order in which an item appears in the Flex container?
Video class: Flexbox Tutorial - 12 - Order 02m
Exercise: What happens when you specify the same order number for more than one item in a Flex container?
Video class: Flexbox Tutorial - 13 - Flex grow 04m
Exercise: What is the default value of the Flex Grow property for all flex items?
Video class: Flexbox Tutorial - 14 - Flex Shrink 04m
Exercise: What is the default value of Flex shrink property?
Video class: Flexbox Tutorial - 15 - Flex basis 03m
Exercise: What is the default value of the Flex basis property?
Video class: Flexbox Tutorial - 16 - Flex 02m
Exercise: What is the recommended way to set flex grow, flex shrink, and flex basis for a flex item using the Flex property?
Video class: Flexbox Tutorial - 17 - Align self 05m
Exercise: What is the default value for aligned self property?

Video class: Flexbox Tutorial - 18 - Practical use cases 00m
Exercise: What are some of the real-world use cases of flexbox?
Video class: Flexbox Tutorial - 19 - Responsive Navbar 05m
Exercise: What property is used to make the items in the navbar distribute the space around them?
Video class: Flexbox Tutorial - 20 - Centering Item 02m
Exercise: What is the solution for centering an item vertically using Flexbox?
Video class: Flexbox Tutorial - 21 - Variable heights 06m
Exercise: How can we achieve columns of equal heights in Flexbox?
Video class: Flexbox Tutorial - 22 - Holy Grail Layout 07m
Exercise: What is the final use case of the holy grail layout?

Learn aboutCSS

Explore free online CSS courses designed to help beginners and aspiring web developers master styling, layouts, responsive design, Flexbox, Grid, animations, and modern best practices. Learn at your own pace, build practical front-end skills, and earn a certificate with every course to showcase your CSS expertise.