How to Add Gaps Between Flex Items in Webflow
In this article
Learn how to easily adjust the spacing between elements within a flex container in Webflow using the Gap setting.
Explore more Webflow tutorials with interactive Saltfish walkthroughs.
Here's how to add gaps between flex items in Webflow
- Select Your Flex Container
Begin by selecting the container element on your Webflow page that is set to display as flex. This container holds the items you wish to add spacing between.
- Access the Style Panel
With your flex container selected, navigate to the right sidebar and click on the **Style** tab. This panel contains all the visual styling options for your element.
- Locate the Gap Setting
Scroll down within the Style panel to find the **Layout** section. Here, you will see the **Gap** property, which controls the space between flex items.
- Adjust the Gap Value
You can adjust the gap by dragging the slider next to the **Gap** input field or by typing a specific pixel value directly into the field. This will set the desired spacing.
- Verify the Spacing
After adjusting the gap value, immediately observe your design canvas. The spacing between the items within your selected flex container will update to reflect the new gap.
Your turn to show how it works.
Build a walkthrough of your product with Saltfish, then share it with your customers.
Frequently Asked Questions
The 'Gap' setting controls the amount of space between individual items within a flex container. It applies consistent spacing horizontally and vertically.
Webflow
