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 Structure | Section-Column Structure | |
|---|---|---|
| Control location | Directly inside a Container | In a Column, within a Section |
| Control direction | Column, Row, Column Reverse, or Row Reverse | Column, or Inline Positioning |
| Responsive design | Custom order of controls or Containers to each device | Reverse Column or Duplicate Sections |
| Alignment | Flex-Start, Flex-Center, Flex-End | Left, Center, Right |
| Hyperlinking | Wrap the container to hyperlink it | Hyperlink 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.
