The display: flex property, flex item

CSS Flexible Box Layout (shortened by everyone to “Flexbox”) is the first CSS mechanism that is designed to be used to create complex layouts of blocks.

The other mechanisms that we used in the past to create layouts were not at all purpose built to accomplish this task: we needed to use floating blocks to create blocks when we wanted the text to flow around them. Alternatively, we used absolute positioning to make very fragile layouts.

Flexbox was conceived as a way of creating “flexible” layouts, and it is a tool with many subtleties and wonderful features, which we will delve into in this series of chapters. First, let’s start with some basics. How do you enable flexboxes?

It’s very simple: just assign the display: flex; property to the parent element. When you do this, two events will occur:

1. The element with display: flex; will be transformed into a flex container, and all of the magic of a flexible layout will start happening inside it.
2. The immediate children of this element will be transformed into flex items, and they will start playing according to the new rules.

The first thing that you will notice after completing this task is that the blocks will stretch to the full height of the container. Yes, you can make all items have a uniform height inside a flexbox!

Let’s experiment!