The magic of Flexbox

Flexbox is a highly effective method for organizing the design of your website. In fact, it’s possible to construct almost every contemporary website using flexbox.

As an illustration, consider the following example of what you can create using flexbox. Observe how the layout of the components adjusts as you alter the width of the container.

Drag the marker on the right side of the container to resize its width. Notice how the arrangement of the components changes as you decrease the width.

Here is the code for the above example

<div class="flex flex-wrap gap-4 p-4">
  <div class="flex-1 basis-[5em]">item 1</div>
  <div class="flex-1 basis-[7em]">item 2</div>
  <div class="flex-1 basis-[3em]">item 3</div>
</div>

In this example, we have a flexbox container with three items, each of which is a flex item. The items are set to flex-1, meaning they can grow in size as the container grows. Each item has a unique basis class, such as basis-[5em] for item 1. This sets the initial size of the item to 5em. The basis-[5em] is an arbitrary value used in Tailwind.

Relative units like 5em are useful when working with responsive design. Unlike absolute units like px, relative units like em are proportional to the size of the font in the parent element.

This means that if you use a relative unit, the size of your element will change based on the size of the parent font. This makes it easier to create responsive designs that work well on both desktop and mobile devices.

By using relative units, you can ensure that your layout will remain consistent across different screen sizes and resolutions.

To ensure there is a specified gap between the items, the container has the gap-4 property, which equates to a 1em gap in this example. Additionally, the container has a p-4 class, which provides a 1em padding to the container.

As the items have different basis values, the layout will change as the width of the container changes.

If the container has sufficient space for all items, such as a width of at least 19em, then all items will be displayed in one row.

The number 19em represents the total width of all items, the space between them, and the padding of the container. The formula for this calculation is:

padding + item1.width + space + item2.width + space + item3.width + padding

So for example: 1em (padding) + 5em (item1 width) + 1em (space) + 7em (item2 width) + 1em (space) + 3em (item3 width) + 1em (padding) = 19em.

If the container has enough space for only item 1 and item 2, such as a width of at least 15em, then item 1 and item 2 will be displayed on the first row, while item 3 will be on the second row.

If the container has two rows and a width of at least 13em, item 2 and item 3 can fit on the same row. In this case, item 1 would be on the first row, and item 2 and item 3 would be on the second row.

If the container width is less than 420px, such as 419px, then all three items will be displayed in separate rows, giving a total of three rows.

In this lesson, we aim to enhance your understanding of Flexbox. By exploring the different properties of Flexbox, we will gain a deeper understanding of how the Flexbox algorithm operates. This lesson is suitable for both beginners and experienced CSS users who want to strengthen their Flexbox skills. Let’s get started!

Next1. Introduction