Getting Started with Flex Layout

To access Flex Layout, select more than one element on your canvas. When multiple elements are selected, a new “Layout” option will appear in the Style panel on the right-hand side.

Enabling “Flex” on a frame tells Vev: “Here’s my content—organize it in the best possible way.” From there, you can start customizing properties like direction, spacing, alignment, sizing, and padding to build responsive layouts effortlessly.

Flex Layout Properties Explained

Flex Layout introduces a powerful set of tools to control how your elements behave inside a frame. Below, we’ll break down each property to help you make the most of them.

1. Set the Direction: Vertical, Horizontal, or Wrap

• Vertical: Elements are stacked below each other.
• Horizontal: Elements are arranged side by side.
• Wrap: This option is enabled by default when nested elements are arranged horizontally.t ensures your elements will automatically reorder or 'wrap' to the next line based on the frame width.

2. Control the Spacing Between Elements

Flex Layout introduces a powerful set of tools to control how your elements behave inside a frame. Below, we’ll break down each property to help you make the most of them.

In this release, we’ve simplified spacing options, leaving just Packed and Space Between.

• Packed: Groups elements closely together, recommended for most use cases.
• Space Between: Distributes elements evenly to fill the available space.

3. Align Elements Within the Frame

The alignment property defines the position of elements inside the frame. Choose from nine alignment options, such as Top Left, Center, or Bottom Right, to perfectly position your content.

When using Space Between mode, alignment is automatically adjusted to evenly distribute elements, limiting the alignment options to Top, Center, and Bottom.

4. Customize Sizing for Responsive Layouts

Configuring the sizing properties of nested items allows you to control how they resize, ensuring the responsiveness of the parent frame. Flex Layout supports several sizing options:

• Pixels (px)
• Percentages (%)
• Viewport Width (vw) & Viewport Height (vh)
• Auto
• Fill Space
• Min Width & Height
• (✨New) Max Width & Height

With this update, Min Width is automatically applied to nested elements, ensuring they adjust to the smallest breakpoint (e.g., mobile), making the resizing mechanism smoother.

The new Max Width and Max Height options allow you to set limits for elements, preventing them from becoming too large on wider screens. For example, if an image’s width is set to 100%, it will stretch to fill the container on larger devices. By applying a Max Width, you can ensure it doesn’t exceed a specific size, maintaining a balanced layout across all screen sizes.

5. Adjust Padding

Configuring the sizing properties of nested items allows you to control how they resize, ensuring the responsiveness of the parent frame. Flex Layout supports several sizing options:

Bonus Enhancements

Bonus 1: Refreshed Style Tab Organization

We’ve reorganized the Style Tab to provide dedicated sections for Position, Size, and Layout. This new structure improves readability and streamlines your workflow by grouping related settings together.

Bonus 2: Introducing the Clipping Option

You can now clip framed elements into shapes! Frames are compatible with this feature—so if you want to clip an image, simply frame it first. (Note: Custom clipping shapes are on the roadmap, so stay tuned for even more flexibility.)