As a developer, I have seen that people tend to have confusing thoughts about CSS Flexbox. As a result, they end up adding a lot of properties that they are not sure about. They know about flexbox but are confused about its properties and impacts. So, in case you feel the same, here is something. It will eliminate or at least reducing confusion about Flexbox.

Firstly my one-liner definition of a flexbox,

Flexbox is just a concept introduced in CSS, which provides numerous ways to position elements when combined with different properties.

For now, I will limit my scope to basic properties only. Here is the list of the properties covered here:

1. align-items
2. justify-content
3. flex-direction
4. flex-wrap
5. flex

Setup

---

Before starting anything, let's do some setup.

Image rectangular ground with few soldiers in it. Now we are going to understand the CSS Flexbox properties with the help of these soldiers and ground.

EXPLANATION:

• We have a commander & few soldiers.
• You will act as a commander as you will command soldiers who, in reality, are DOM elements.
• You will be responsible for telling them where to stand by defining specific ground rules and commands.
• The ground will act as our flexbox, which has some default rules to avoid chaos.
• As a Commander, you can change/override any of the rules or commands.
• Soldiers will follow the latest version rules and orders in all possible scenarios.

In short:

• Ground <=> Flexbox
• Soldiers in Ground <=> HTML elements
• Commander <=> Developer/You (Not part of the ground instead controls it)

Default Rules

---

As I said, the ground will have some default rules.

• This ground has a primary direction, and by default, it is along the horizontal line.
• Soldiers always stand in a single straight line in the ground's primary direction.
• Soldiers will only take space that they need (nothing extra, until specified)
• The soldier's line always starts from the Entry Gate's side & it will act as the start position. (Top-left corner in case of the web, which is the initial position of all elements)

The above rules are applied as soon as we write the following line.

.ground{
    display: flex;
}

Defining Properties

---

1. Justify Content

So you are the commander, and soldiers are standing in a line. They won't break the line, and they won't change the order in which they are standing.

Now, If you want all soldiers to stand near the gate. Create a rule

.ground{
     justify-content:flex-start;
}

If you want them to stand near the end. Create a rule

.ground{
     justify-content:flex-end;
}

Note: You are only telling them to change position. Changes will be visible in the primary direction only

Possible values are

• flex-start: Soldiers should always stand near to gate.
• flex-end: Soldiers should always stand far from the entrance/ near the end of the line.
• center: Soldiers should always stand near the center of the line.
• space-between: Soldiers should stand in such a way that they have maximum possible space between them.
• space-around: Soldiers should stand in such a way that they have maximum possible space between the line and the ground boundaries.
• space-evenly: Soldiers should stand in such a way that they have equal spaces between them.

2. Align Items

In the first point, we were able to change the soldier's position within the line. But what about the situation when you want to change the position of the line itself. Align Items is your tool for this case.

Create a rule saying

.ground{
     align-items:flex-start;
}

In this case, the soldier's position won't change within the line as mentioned in the first rule. Instead, this will change the position of the formed line itself. The complete line of soldiers will shift to start.

If you want to shift the line to end, create this rule

.ground{
     align-items:flex-end;
}

Possible values for this rule are:

• flex-start: The soldier's line will shift to the top.
• flex-end: Line will shift to end.
• center: Line will shift to the center.
• stretch: This one is different. The line will be stretch itself from start to end. Now, what will happen to soldiers? Since soldiers form the line, they will also try to stretch themself as much as possible.

3. Flex Direction

Here we are with the third rule, where most of the people get confused. With this rule, the commander can tell everyone what will be the direction of the primary line.

Points to Remember about the previous rules

• Justify Content change position in the primary direction
• Align Items will change the position of the line itself

Keeping the above points in mind, you can set a rule of direction as well

• row: Sets the line direction from left to right.
• column: Sets the line direction from top to bottom.
• row-reverse: Sets the line direction from right to left.
• column-reverse: Sets the line direction from bottom to top.

4. Flex Wrap

Now, this is an interesting one. Consider a scenario where the count is big enough to go beyond the ground boundaries. Let us understand the options the commander has now.

The possible solution is:

• wrap: This will create a possibility of forming new lines.
• nowrap: Everything will happen in a single line.

Here's an example

.ground{
     flex-wrap: wrap;
}

5. Flex

This property is last and different from all others we have discussed till now, as it applied on elements and not on container. Also, it accepts numeric values.

Now imagine, one of the soldiers is carrying a heavy weapon. You want that soldier to take some extra space to avoid any problem.

Just command that soldier;

.solider{
     flex:1;
}

This will tell him to take one space, where total space is the sum of all flex values. Here's another example:

Solider-1 takes two units of space. Solider-2 takes one unit of space. ( Total space = 2 units + 1 unit = 3 units). As a result, Soldier-1 will take 2/3rd of the total area & Soldier-2 will take 1/3rd of the total area.

And with this, we are done with all the mentioned properties.

Bonus

---

If this provided clarity and you want to understand more about flexbox. Check out this link .