Whenever you need to create a layout based on rows and columns, flexbox is your best bet.
The concept of flexbox is simple:
- You have a flexbox container.
- The immediate children in the flexbox container are known as flexbox items.
Here's take a look at the example below:
The
blue box is the flexbox container and the light gray boxes are all flexbox items.
The
gray boxes are automatically interpreted as flexbox items as they are directly inside the flexbox container.
Set the CSS rule to an HTML element to make it a flexbox container:
display: flex;
Now that you know the very basics, let's move over to do some cool stuff!