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 flex-row@xs gap-xs">
  <button class="btn btn--subtle">Button</button>
  <button class="btn btn--primary">Button</button>
</div>