CSS Flexbox Tutorial

12 tutorials

All

Tailwind CSS

Build a Static Site with Figma & Astro

Django with HTMX

Node.js Tutorial for Beginners

JavaScript

Python 3 for Beginners

CSS Positioning Tutorial

Canva Tutorials

HTML Tutorial for Beginners

YouTube SEO Tutorial

PSD to Responsive Website

TypeScript Tutorial

Claude Code

Responsive Web Design

PSD to WordPress

GraphQL Crash Course

CSS Animation Tutorial

CSS Flexbox Tutorial

JavaScript ES6 Tutorial

Angular 2 Tutorial

SASS Tutorial

CSS Tips and Tricks

WebSockets (Socket.io) Tutorial

Asynchronous JavaScript

Grunt JS Tutorial

Styling HTML 5 Forms

Webpack Tutorial for Beginners

REST API Tutorial

Vue JS 2 Tutorial

Vuex Tutorial

JavaScript DOM Tutorial

CSS Grid Tutorial

OAuth Login (Passport.js) Tutorial

Django Tutorial

Object Oriented JavaScript Tutorial

#1 Introduction

An overview of CSS Flexbox — what it is, why it replaced floats, and how it makes layout simple and powerful.

#2 Flex Containers

Understand the flex container — display: flex, flex-direction, justify-content, and how flex items behave.

#3 Flex Grow

Learn how flex-grow distributes remaining space among flex items — proportional growth and space filling.

#4 Flex Shrink

Learn how flex-shrink controls item contraction when the container is too small — preventing overflow.

#5 Flex Wrap

Control whether flex items stay in one line or wrap to multiple lines with flex-wrap.

#6 Flex Basis

Set the ideal starting size of flex items before grow and shrink kick in — and the flex shorthand.

#7 Creating a Menu with Flexbox

Build a responsive horizontal navigation menu using Flexbox — logo, nav links, and action buttons.

#8 Creating Nested Menu's with Flexbox

Build dropdown sub-menus within a Flexbox navigation — nested flex containers and hover-triggered dropdowns.

#9 Axis

Deep dive into the main axis and cross axis — how flex-direction changes them and how alignment works on each.

#10 Align Items on the Cross Axis

Master cross-axis alignment — align-items, align-self, and align-content for precise control over item placement.

#11 Grid vs Stacked Layout Example

Build a responsive layout that switches between grid and stacked views using Flexbox and flex-direction.

#12 Element Order

Visually reorder flex items without changing HTML using the order property — responsive reordering.