Course “CSS: Flexbox fundamentals”
Course updated on November 26, 2024
Access this and all courses with a subscription
What's included
Description
With the increasing number of web pages and the complexity of the design, there emerged an urgent problem with the arrangement of elements. The advent of mobile devices has shown that the current positioning capabilities are not enough, and developers require a new mechanism that will allow them to control elements on the screen. CSS Flexible Box Layout became such a mechanism. In this course, you will learn step by step the possibilities of the Flexbox mechanism and learn how to use it in practice.
You will learn
- Apply basic CSS Flexible Box Layout properties
- Control HTML elements vertically and horizontally using Flexbox
- Create layouts adapted for mobile devices
- Create flexible elements that change the width and height
Syllabus
1 | Intro Meet the Flexbox course |
2 | What is a Flexbox? Learn about the Flexible Box concept, its advantages and use cases |
3 | Flex container Learn about flex containers and how to define a master axis for rendering elements |
4 | Wrapping elements in a container Learn about ways to wrap elements within a flex-container. Learn how to use the flex-wrap property |
5 | Aligning elements along the main axis Learn the ways of aligning elements along the main axis inside a flex-container. Discover the justify-content property |
6 | Element alignment along the perpendicular axis Learn how to align items along a perpendicular axis inside a flex-container. Discover the alignment-items property. |
7 | Properties of Flex elements. Flex-grow Explore the properties when dealing with elements inside Flex containers. Learn to use the Flex-grow property. |
8 | Properties of Flex elements. Flexibility Explore the properties when dealing with elements inside Flex containers. Learn to use the flex-shrink, flex-basis, and flex properties |
9 | Properties of Flex elements. Positioning Explore the properties when dealing with elements inside Flex containers. Learn the properties order and align-self |
Challenges
1 | Histogram |
2 | Flex adaptivity |
3 | Hero Section |
4 | Masonry Layout |
- Run code right in the browser
- Lifetime access
- Learn at your own pace
Access this and all courses with a subscription