Tailwind Crash Course - Project Based Learning
Quick Revision on Flexbox
Awesome! A lot of information in flexbox lessons. You may need to revise this one because this is very very important. A quick revision for this lesson:
.flex FlexBox: Is what is going to allow us to do incredibly powerful layouts with Tailwind and it’s actually a css feature. But Tailwind does great job when implementing it nice and easy. So adding .flex simply gives us a flex container and from there we unlock all of the power of flexbox.
Starting with flexbox directions, we have two of them:
- Horizontal
- Verticle
For Flexbox horizontal direction, we use .justify-{start | center | end | between | around}. Here start is the default.
For Flexbox vertical direction, we use .items-{stretch | start | centre | end | baseline}. Here stretch is default which fill the container.
We also found out that we can actually change the directions of a flexbox using .flex-{row | row-reverse | col | col-reverse}. Row is the default direction.
🛎️ Attention: You can get little bit confusing but you need to be sure which direction you are thinking of. Is that left-to-right or is it top-to-bottom?
Then finally we talked about .flex-wrap. To be able to create some nice layouts that do change as the browser window changes and resizes. Flexbox wrap exactly what we will need.
