Tailwind CSS
/Beginner
Flex Direction
Definition
Utilities for controlling the direction in which flex items are placed in the flex container.
Explain Like I'm New
Flexbox normally puts things in a horizontal Row. If you change it to `flex-col`, it stacks things vertically in a Column. The brilliant part is that you can use responsive classes to have a Row on Desktop, but a Column on Mobile.
Real World Example
A Pricing Page with 3 pricing tiers. On a laptop, you want them side-by-side (`flex-row`). On a mobile phone, there isn't enough room, so you stack them vertically (`flex-col`).
Common Use Cases
- •Responsive layouts
Interactive Example
Interview Questions
basic
- What is the default direction of a `flex` container?
intermediate
- How do you completely reverse the visual order of items in a flex container without changing the HTML?