Leverage Flexbox Containers to Create Top Performing and Responsive Designs

In the latest update of Yeeflow, we introduce Flexbox Containers, a new lean layout structure that brings CSS Flexbox into the Editor. This structure allows you to achieve pixel-perfect responsive designs and highly advanced layouts quickly, and with a much slimmer markup, which improves performance significantly. This feature marks a transformative shift in how web applications are built using Yeeflow’s builder and is the foundation of a variety of additional, advanced capabilities.

Flexbox Containers is a new building block in Yeeflow that empowers you to efficiently lay out, align and distribute items in a Container in a lightweight and responsive manner. With Flexbox Containers, you can place controls directly inside the Container, as well as nest Containers infinitely. Then, you can control the layout and distribution of controls within the Container, and adjust your content to every screen size, resulting in greater responsiveness, without compromising on speed, and without writing a single line of code. 

What’s the Difference Between Containers and Sections?

You can add Containers to your page, as well as drag Containers to the Canvas, or into another Container using the control from the Editor Panel. Below are a few additional, technical differences between Containers and Sections. 

Flexbox Containers StructureSection-Column Structure
Control location Directly inside a Container
In a Column, within a Section
Control direction Column, Row, Column Reverse, or Row ReverseColumn, or Inline Positioning
Responsive designCustom order of controls or Containers to each deviceReverse Column or Duplicate Sections
Alignment Flex-Start, Flex-Center, Flex-End
Left, Center, Right
HyperlinkingWrap the container to hyperlink itHyperlink a control, not a section or column

Flexbox Containers Will Transform How You Build Applications

With Flexbox Containers you can quickly create simple and advanced layouts, and improve user experience and performance. Below is an example of how:

Facilitate Intuitive User Experiences with Clickable Containers

Some designs make visitors think that the entire content area will be clickable – such as a card. However, when they try clicking it, they have difficulty finding the area of the card that is actually clickable. With Containers, you can wrap the entire Container and add a link to it, making the entire Container clickable, which creates a highly intuitive experience for your visitors.

Nest Containers Infinitely to Create Advanced Layouts

Flexbox Containers empower you to create advanced layouts faster. While with the Section-column layout, you would only be able to place a single inner-Section within a Column, with Flexbox Containers you can Nest Containers infinitely. Nesting Containers will allow you to set different directions and alignments for each one, to quickly create highly advanced layouts. 

Get to learn the details about how the use the new Container control.

You may also like

Introducing Copy Paste & Copy Style

We’re excited to release one of the most requested features: Copy Style & Copy Paste. This will save you hours of work, allowing you to quickly copy any style or element with a single click.

What’s new in Yeeflow: June 2022

Offering more access, flexibility, and freedom is the theme for this month’s round-up. With new the navigator, we’re extending Designer’s capability to meet people where