Adjust gap space between elements in Flexbox layouts
Now you can control the space between elements in flex layouts exactly like you would with CSS grid.
<p>Today, designers have to include <a href="<https://university.webflow.com/lesson/spacing-margin-and-padding>">extra margin or padding</a> when using the flex layout to establish the spacing between their elements on the canvas. This process is time-consuming and challenging to get right because you have to wrap and adjust the margin for each element in the layout. Although <a href="<https://university.webflow.com/lesson/grid-2-0>">CSS grid</a> is an optional layout for users, it can be considered overkill for one-dimensional (1D) layouts.</p><p>This is why we’re excited to share that starting today, everyone can now adjust the gap of a CSS flex layout from the layout section of the Designer, exactly like you would with CSS grid. </p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1080px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1080px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21d5fa_3L6ruqJWfXNR1tvvagrzGK0lN9VlHrZHuS-xv2xMlbuo7hkhQrv8uHszheCPDJr0AQ-Y5ZfPzuRw-rFZATZXS8MsC7NqTjokbu-O75BeP8jfkVqZmWU-K2Kj74OcR7j5cgmLUhaU.gif>" width="auto" height="auto" loading="auto" alt="Control the space between columns and rows in the flex layout."></div><figcaption>Control the space between columns and rows in the flex layout.</figcaption></figure><p>For more details on how to easily apply gap when using the flex layout, check out the newest<a href="<https://university.webflow.com/lesson/intro-to-flexbox>"> article</a> on Webflow University. If you need a quick refresher on the similarities and differences between flexbox and CSS grid to know what to use and when – head over to our <a href="<https://university.webflow.com/lesson/flexbox-vs-grid>">Webflow University page</a> for a quick tutorial. </p>
