AVADA – Using Flex Grow On Separators – Equal Height Columns
A new feature in Avada, thanks to Flexbox, is using Flex Grow on Separator Elements. Let’s see what this new option does.
You can find this option in the Separator Element at the top of the design tab. This Flex option allows the separator to expand and fill the available space. Here’s an example to explain it better.
Imagine we have three Columns in a row, with the parent Container’s Column Alignment set to Stretch. This setting makes the Columns stretch to the full height of the Container. Now, each Column has a Title, a Checklist Element, a 20px Separator, and a Button at the bottom. Because the number of Checklist items might differ, the columns would be the same height, but the buttons wouldn’t be aligned at the bottom. It would look like this.
“In the back end builder, the columns will look like this.”
You can try to improve the alignment by going to Column > Content Alignment Options and using one of the Space options like Space Around, Space Between, or Space Evenly. However, there’s an easier way using the Separator Element with Flex Grow.
Flex Grow is simple to use. It’s set to 0 by default, which means it’s off. To fix our issue, go into the Separator Element in each Column and change the Flex Grow option to 1. This makes the Separator fill the available space. Flex Grow can use numbers higher than 1, but for now, setting it to 1 is enough to make the Separator expand into the space.
Now our columns will look like this, with the buttons lined up at the bottom. That’s Flex Grow!
