CSS: Flexbox fundamentals

Included in the course

What you'll 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.

Course program

• 1

  Intro

  Meet the Flexbox course

  theory
• 2

  What is a Flexbox?

  Learn about the Flexible Box concept, its advantages and use cases

  theory

  quiz

• 3

  Flex container

  Learn about flex containers and how to define a master axis for rendering elements

  theory

  quiz

  exercise

• 4

  Wrapping elements in a container

  Learn about ways to wrap elements within a flex-container. Learn how to use the flex-wrap property

  theory

  quiz

  exercise

• 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

  theory

  quiz

  exercise

• 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.

  theory

  quiz

  exercise

• 7

  Properties of Flex elements. Flex-grow

  Explore the properties when dealing with elements inside Flex containers. Learn to use the Flex-grow property.

  theory

  quiz

  exercise

• 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

  theory

  quiz

  exercise

• 9

  Properties of Flex elements. Positioning

  Explore the properties when dealing with elements inside Flex containers. Learn the properties order and align-self

  theory

  quiz

  exercise

• 10

  Additional resources

  Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic

Challenges

We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.