course
CSS: Flexbox fundamentals
2 students
Course updated
23 June 2022
Included in the course
9 lessons (video or text)
11 exercises in the IDE
35 quizzes
Assistance in «Discussions» on the website
Access to other courses of the our platform
What 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
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.
Lessons
-
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 -
10
Additional resources
Materials were picked up by the Hexlet team. This will give you a more in-depth understanding of the topic
Challenges
We recommend you to work on these challenges after completing the course. They will help you obtain more experience in programming and strengthen new skill.
#
Challenge
completion rate