🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

May 15, 2020

From full-width to auto-width buttons using flex-direction

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>

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us