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.