Shubh Sharma {await β˜•} Profile picture
Self taught developer⚑(he/they) / Full-stack / Designer / CEO of coffee addiction / #100xdevs ✨

Jun 12, 2023, 18 tweets

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.

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling