Hi
I am totally stuck on how I can align the buttons in my CMS block to the bottom of the boxes, so they all line up, no matter how much text is above them.
Please can someone help, it’s driving me mad!
Here is my site Read-Only: Webflow - falfungi
Hi there!
To align elements using flexbox with one element pushed to the bottom, follow these steps:
- Select your container element
- In the Style panel, set Display to “Flex”
- Click the Direction icon and select the vertical orientation (down arrow)
- Select the element you want to push to the bottom
- In its Spacing settings, add “auto” to the top margin
This creates a flexible container with vertical alignment, and the auto margin on top will push your element to the bottom of the container while maintaining proper spacing for other elements.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
I’ve tried setting the parent as a flexbox, but it screws up the layout and the text and image get squashed into one long column. If you look at my site, which of the divs should I be setting to flex?
Hello KHS!
Select blog42_item, switch display to " Flex ", on the sizing select " Grow if possible ", Direction " Verticle ", Align X: center Or Left, and Y: space between, just like the screenshot below:
Then simply select the text and make margin-bottom " Auto " and it should fix it for you like the screenshot below:
hope that helps!
1 Like
@maxioos that worked perfectly, thanks for the super clear instructions!
1 Like