Flexbox part 1 - Leonel Ngoya

Hey,
So, what are FlexBoxes? For those who don't know — long ago we used float to position elements (I won't go back over this, but if you want to know more you can check HERE). But float had drawbacks — a major one being that a floated element is taken out of the normal flow of the screen (exactly like we saw in positioning), which wasn't always practical and gave unpleasant results sometimes. That's how flexbox came in. In a sentence:

flexbox is a set of properties whose main purpose is to control child elements from the parent element.

Said like that it's a bit vague, but in this series of articles (yes, there will be several) we'll try to analyze this system step by step.

So for this article we'll start with an index.html file containing:

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
</div>

And a style.css file containing:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
}

.item {
  width: 150px;
  height: 150px;
}

.item-1 {
  background-color: #f00;
}

.item-2 {
  background-color: #0f0;
}

.item-3 {
  background-color: #00f;
}

.item-4 {
  background-color: #ff0;
}

.item-5 {
  background-color: #0ff;
}

Nothing complicated for now, and the result is:

Flexbox is actually a display system; so to access the properties it offers, we have to change our display — but the display of which element? The parent element, of course, because that's what controls its children. So to start we'll change the display of our container div to display: flex; — and yes, it's not display: flexbox; as one might have thought.

.container{
  display: flex;
}

The result is quite surprising, it looks like magic and of course we wonder what happened. To understand this, we'll discuss a flexbox property — and you should understand it well because it's essential for what follows.

flex-direction: ;

This is a very important property in flexbox. It defines how our child elements will be aligned. What you should understand right now is that it can take 4 values:

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

The cleverest will have guessed that the default value is flex-direction: row;, which means My children will align as a row, and row-reverse simply means the opposite direction (the elements are reversed).

flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

The respective results of these three values give:

*** That's nice but it's not really the IMPORTANT thing I wanted you to remember about this property. You should know that display: flex; creates a coordinate system (yes, like in math) with two axes called the mainAxis Alignment for the main axis and crossAxis Alignment for the secondary one.

It's still vague and you don't see the connection. Well, here it is:

The position of the main axis (mainAxis Alignment) and the secondary axis (crossAxis Alignment) depends on the value of flex-direction.

If flex-direction: row / row-reverse; it'll be like this:

If flex-direction: column / column-reverse; it'll be like this:

What I just said is VERY IMPORTANT for what follows, so really take the time to understand this so you don't have problems later.

I'll leave you with that to whet your appetite while waiting for the next part of this series.

We've reached the end of this article and I hope you enjoyed it. If so, feel free to share on your networks and ask questions if you didn't understand a particular point. So, see you in the next article, ciao! It was LN 👋

Previous article: CSS Positioning
Next article: Create a custom cursor