Using Flexbox - Solutions

This lesson is the solution to the Using Flexbox exercise in the previous lesson.

We'll cover the following


Let’s recall the changes to the challenge in the previous lesson:

.right-container {
  width: 300px;
  background-color: #F7CFB6;
  height: 320px;
  /* New rules: */
  display: flex; 
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

After entering the four new rules one by one, you may have concluded what each of these rules mean.

What do these four statements mean?

  • display: flex; establishes the container as a Flexbox, displaying the two items inside it next to each other
  • flex-direction: column; makes sure that we organize the elements inside the container vertically (top-down)
  • justify-content: space-evenly; ensures that the space before the first container, between the two containers, and after the second container are equal
  • align-items: center; horizontally centers the banners.

The final solution looks as follows:

Get hands-on with 1000+ tech skills courses.