Using Flexbox - Solutions

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

We'll cover the following

Solution

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.