How to add space between columns in Flex display
The Flex Spacer element allows you to add automatic horizontal/vertical spacing between elements for Flex column.
Common uses:
- Between the items to push them away
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor.
To add a Flex Spacer element to a page:
1. Add a new page or edit an existing one.
2. Click on Edit with Elementor button.
3. Click on the Column icon to edit the column settings.
4. Open “Layout” section and set Display option to Flex.
5. Go back to Elements list.
6. From the left dashboard, search for a “Flex Spacer”.
7. Drag and drop the Flex Spacer element to your column.
8. A space will appear between the elements.
Spacer vs Flex Spacer
You may notice there is a basic element Spacer you can use.
The difference between them is basic Spacer adds some space only below the elements.
But if you use Flex column and want to push one element to the left and another to the right, the best choice is to use Flex Spacer as it adds horizontal/vertical space between the items to push them to different sides of the column.
Flex Spacer is mostly used for headers when you want to put the logo on the left and navigation on the right.
Flex Display
The Flex Display Layout makes it easier to design flexible responsive layout structure without using float or positioning. The flex property sets the flexible length on flexible items.
It gives you the modern style of laying out content.
And Flex Spacer element will help you to position the items in Flex column properly.
To find out more about the Flex display, please check out this article.
