Using Flexbox - Solutions

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: