Thread by @shubhstwt

This thread will teach you flexbox 🧵👇

1/ There are 2 axis in Flexbox 🗳

- main axis 🟩
- cross axis 🟥

I have denoted main axis with green color and cross axis with red color.

Very important lines 🚨👇

"main axis is controlled by justify-content property"
"cross axis is controlled by align-items property"

2/ You can also think of main axis as horizontal axis and cross axis as vertical axis however its a wrong approach.

Why ❓

Because this will change when the flex-direction is explicitily set to column.

Note: flex-direction is set to row by default.

3/ When the flex-direction is set to column.

- main axis will become cross axis.
- cross axis will become main axis.

and this is why I said very important 🚨 line because its important to remember which property controls which axis.

You can see here, axis are flipped now 👇

4/ But In this thread I will talk only about the different properties when flex-direction is set to "row" by default.

So that everything remains as basic as it can for this thread. 🧵

5/ justify-content: start;

6/ justify-content: end;

puts the content at the end of row

7/ justify-content: center

puts the content in center

8/ justify-content: space-around;

spreads the content

9/ justify-content: space-between;

content is spread across the row with equal space but as much as it can take between.

10/

justify-content: start;
align-items: center;

11/
justify-content: start;
align-items: end;

12/

Both of the properties are set to center in this

13/

justify-content: space-around;
align-items: center;

14/

justify-content: space-around;
align-items: end;

15/ 🚨 Do not try to remember these as you will not.

These properties and these layouts can only be learnt when you practice.

I mean how can you remember all of these?

I haven't even mentioned about

👉 row-reverse
👉 column
👉 column-reverse

16/ So what is the best approach to learn these❓

Answer: flexboxfroggy.com

17/ That's a wrap 🎁

In the next thread I will talk about

"what happens when you set flex-direction to row-reverse"

If you liked this thread:

- Retweet 🔀
- Leave a ♥
- Follow me for more of such informative threads.