
Discover what this CSS Flexbox course is all about.
Discover what you’ll learn in this section.
Find out what Flexbox is all about, and what it can do for you.
Find out how well supported Flexbox is in the major browsers.
Find out how well supported Flexbox is in the major browsers.
See what tools we’ll need before we start building Flexbox-based web layouts.
Let’s review what we’ve learned.
See what you’ll learn in this section.
See how easy it is to set up your first parent flex-container.
See how to set Flexbox flow axis directions.
Get a handle on how widths work with flex-items.
Learn to control how child flex items wrap inside the parent container using the flex-wrap property. Explore wrap, no wrap, and wrap-reverse behaviors and how container width influences wrapping.
Learn how to code your layouts faster with CSS shorthand.
Set up flexbox parent containers to establish the child flex items, explore flex flow directions, and use CSS shorthand to simplify wrapping, spacing, and alignment of flex items.
Find out what you’ll learn in this section.
Discover how you can adjust spacing and alignments along the main Flexbox axis.
Margins play an interesting role when spacing and alignments are introduced. Learn how it works.
See how to align and space apart your flex-items along the flow’s cross axis.
Learn how to override Flexbox alignments to set individual flex-item positioning.
Get a handle on how to adjust spacing within wrapped Flexbox layouts.
Adjust and control the display order of your flex-items.
Let’s review what we’ve learned.
Discover what you’ll learn in this section.
See how to set a starting point for your flexible, responsive layout.
Control how flex-items will adjust and behave when the layout expands to fit larger displays.
Determine how flex-items should behave and adjust when displayed on a smaller display.
Speed up your work by making use of CSS Flexbox shorthand.
Let’s review what we’ve learned.
See what you’ll learn in this section.
Force nested flex-items to wrap on to additional lines, giving a result similar to a photo gallery.
Set nested flex-items to scale and adjust themselves automatically.
Set independent sort orders for your groups of nested child flex-items.
Test your Flexbox skills with this hands-on project.
Learn about how you can take Flexbox even further.
Thanks for watching!
Once upon a time building functional, responsive web layouts required hacking, lots of JavaScript, and more than a few CSS floats. Then came Flexbox, a layout mode for CSS that got rid of all the headaches. This online course will get you up to speed on the latest version, introduce you new even better features, and help you get to grips with Flexbox in a hands-on, practical way.
Create and Manage CSS Flexbox Layouts
Learn Fundamental Flexbox Concepts
This course is intended for those who have a working knowledge of HTML and CSS, and who are comfortable coding by hand and navigating through code. With an emphasis on in-depth, hands-on training, you'll learn the latest techniques for building and managing functional CSS-based web layouts.
To start off, you'll be introduced to fundamental Flexbox concepts and terminology, as well as the other essential knowledge you'll need to know before going further. From there, the lessons get progressively more hands-on and challenging. You'll cover flex containers, flow axis directions, flex widths, axis spacing and alignment, establishing element flexibility, working with nested flex containers, and more. Each section includes a practical exercise to put your skills to the test, and a quiz to help compound your knowledge.
If you want to push your HTML, CSS and web design skills further, if you want to learn the latest in CSS web layout techniques, or if you just want to know the secret to building responsive, mobile layouts with minimal code, then this online course is a must.
About Flexbox
Flexbox, or the CSS Flexible Box, is a layout mode in CSS that allows designers to build and manage website layouts quickly and easily. Arrange each page element and test on different screen sizes (i.e. desktop, mobile, tablet) and display devices to ensure your code behaves accordingly. It was created to replace float and table layout hacks, making life much easier for designers and developers everywhere.