A Survival Guide: CSS Flexbox

There are a million tutorials online that tell you about all the CSS Flexbox properties, how to use them etc., and I for once do not want to be among them. This is not an article that will throw jargon at you, but rather explain CSS Flexbox in complete beginner terms.

This will purely be about what and why CSS flexbox is and what're the most commonly used properties plus some resources for further study.

What and Why is Flexbox even?

Flexbox is just short for the flexible box module. It provides a clean way to arrange items in a container as either columns or rows. Flexbox is used to create 1D layouts which most of us would need in 99% of cases, for 2D and complex layouts we would need CSS Grid (which we will cover in a later article).

Flexbox was created so that we can give our container the ability to alter its items' height, width, and order to best fill the available space since all of us are on different devices and screen sizes. There are quite a handful of container properties and item properties that work together to prevent CSS overflow or underflow. This makes the core of responsive web development.
Flexbox is direction-agnostic, that's just a fancy of saying that flexbox is free from directional constraints, meaning we can put our elements in either row or column. This is important as our usual layouts such as inline or block just are not equipped to handle the increasingly difficult requirements of complex web applications.

Terminology

No need to think too heavily about it, just understand that there are two axes: Main and Cross, in which we work, the parent element is known as the "flex container" and the child element is known as the "flex item".

The only properties you will need (probably)

display

We use this to define a flex, inline or block container.

  .container {
      display: flex; /* enables flex context to its direct children*/
  }

flex-direction

This is used to establish the main axis, basically defining the direction of flex items in the container.
```
  .container {
    flex-direction: row | row-reverse | column | column-reverse;
  }
```
justify-content

Helps with the distribution of extra space and defines the alignment along the main axis defined by flex-direction.
```
  .container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  }
```
align-items

Think of it as the justify-content version for the cross-axis.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

Conclusion

The above are the only flexbox properties you will use most of the time. You might also have to use gap and/or flex but they are relatively less used, and you can always look at the million tutorials available online. The idea for this article to help you understand flexbox at its basic and what is it that it does. Once you have the basics down, you can use flexbox for advanced stuff as well.

Below are resources that will help you learn flexbox in detail.

Thanks!

A Survival Guide: CSS Flexbox - #1

Table of contents

What and Why is Flexbox even?

Terminology

The only properties you will need (probably)

Conclusion