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

Using Flexbox - Exercise

Explore how to define and use Flexbox containers and items to build organized, responsive web layouts. Learn to apply flex properties for space distribution and alignment without manual margin adjustments.

We'll cover the following...

Flexbox containers and elements

When creating a Flexbox layout, our first job is to visually define it. You can use pen and paper, a diagramming tool like draw.io, or a more complex web design or UX (User Experience) tool like Figma. Alternatively, you may work with designers who will give you a ready-made plan.

Once the layout is complete, identify the Flexbox containers and inner elements by drawing rectangles.

Note that the Flexbox definition is recursive. A Flexbox child element can also be a Flexbox container of other elements. Example:

In this layout, we have a dark blue Flexbox container with two child elements.

The green child element may or may not be a Flexbox container itself. The light orange box serves two purposes: it is the child element of the dark blue container, but it is also a flexbox container itself, containing two lightblue child elements.

This example illustrates that by using the principles of top-down design, Flexbox can perfectly design the layout of a website.

Let’s build this layout from scratch. First, we’ll come up with the layout:

<div class="container">
  <div class="left-container">
    Left container
  </div>
  <div class="right-container">
    <div class="child-element">
      Banner 1
    </div>
    <div class="child-element">
      Banner 2
    </div>    
  </div>
</div>

Let’s also add some CSS to color these nodes:

.container {
  width: 100%;
  background-color: #25384B;
  padding: 20px;
}
.left-container {
  width: 60%;
  background-color: #A3CFCC;
  height: 320px;
}
.right-container {
  width: 300px;
  background-color: #F7CFB6;
  height: 320px;
}
.child-element {
  width: 240px;
  height: 100px;
  box-sizing: border-box;
  background-color: #86C2DE;
}

Let’s see the results:

So far, the containers do not look organized. We can add the display: flex; rule to the outer container to change this. We will also add the justify-content: space-around; rule to increase the space between the left container and the right container:

You may ask why we should use Flexbox to position the two banners below each other. After all, block-level elements, margins, paddings are sufficient to center the elements.

The case supporting Flexbox is the declarative nature of using the orange sidebar as a container for the two banners such that they are not only centered horizontally, but spaces between the banners and around the banners are the same. In other words, spaces around the banners are even, or the two banners are spaced evenly. As an exercise, try adding the CSS code in the above widget and observe the output.

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

Note that the horizontal and vertical positioning of the banners is fully declarative. We do not have to calculate the margins around the containers, they just fall into place thanks to Flexbox.

1.

Is Flexbox supported by all modern browsers?

Show Answer
Did you find this helpful?