Duration of the online course: 1 hours and 18 minutes
3.67
(3)
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.
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?
1 hours and 18 minutes of online video course
Digital certificate of course completion (Free)
Exercises to train your knowledge
100% free, from content to certificate
Ready to get started?Download the app and get started today.
Install the app now
to access the course
Over 5,000 free courses
Programming, English, Digital Marketing and much more! Learn whatever you want, for free.
Study plan with AI
Our app's Artificial Intelligence can create a study schedule for the course you choose.
From zero to professional success
Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.
You can also use the QR Code or the links below.
Free CourseCreate an Ecommerce website using PHP and MySql
5
(1)
18h49m
35 exercises
Free CourseProgressive Web Application PWA for Beginners
5
(3)
3h24m
15 exercises
Free CourseJavaScript for beginners
4.91
(23)
1h40m
2 exercises
Free CourseUmbraco CMS
4.86
(22)
6h21m
19 exercises
Free CourseFull Stack Web Development
4.81
(16)
26h16m
48 exercises
Free CourseAngular 2 for Beginners
4.79
(29)
1h02m
9 exercises
Free CourseDesign and code a landing page
4.76
(34)
4h40m
15 exercises
Free CourseJavascript
4.75
(104)
4h52m
46 exercises
Free CourseWeb Development for beginners
4.72
(802)
5h21m
30 exercises
Free CoursejQuery
4.71
(14)
9h04m
7 exercises
Thousands of online courses in video, ebooks and audiobooks.
To test your knowledge during online courses
Generated directly from your cell phone's photo gallery and sent to your email
Download our app via QR Code or the links below::.
Carry knowledge in your pocket.
Download the Cursa app.
There are hundreds of free courses available, with a free certificate of completion that is saved in your mobile image gallery.
Download the app to access the Course Completion Certificate for Free.
+ 10 million
students
Free and Valid
Certificate
60 thousand free
exercises
4.8/5 rating in
app stores
Free courses in
video and ebooks
Course comments: CSS flexbox tutorial
Nothing
very good course of flec