Learn how to take advantage of the (flexbox) flex-direction property to create responsive buttons.
Flex-direction is used to specify the main axis along which the flex items are laid out. We can take advantage of that and change the flex-direction value from "column" to "row" at a specific breakpoint to design responsive buttons.
- row (default) -> the flex items are distributed along the x-axis
- column -> the flex items are distributed along the y-axis
Normally, on smaller screens, we want our buttons to occupy the whole width and shrink to their "auto" size on bigger screens.
Here's an example:
Using the utility classes of CodyFrame, you'd have:
<div class="flex flex-column [email protected] gap-xs"> <button class="btn btn--subtle">Button</button> <button class="btn btn--primary">Button</button> </div>