Search⌘ K
AI Features
Home
Courses
Designing Web Layouts with CSS and Flexbox

Using Flexbox - Solutions

Explore how Flexbox container properties control layout flow and alignment. Understand flex-direction, wrapping, and spacing options to effectively organize elements along the main and cross axes for responsive design.

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