Flex: Overview (Flex v2.0)

Note: this article covers Flex v2.0. If Flex was added to your site before July 18, 2022, see our "Flex: Overview (Flex 1.0)" doc.

Flex mode offers an exciting new way of designing responsive sections and pages. New inline editing technology allows pixel-perfect accuracy for any element, and offers control of breakpoints.

Flex is seamlessly integrated into the Without Code builder and can be used in individual sections of a site or used throughout an entire site build. This type of integration allows users to choose when elements are best arranged in a responsive layout and when it’s not needed; as Flex sections can be mixed and matched with standard rows at will.

Integrating Flex into the builder as an optional editing mode also allows longtime Without Code users the ability to learn to use Flex at whatever pace you prefer, rather than forcing an editor change all at once.

In this article, we will show you how to add a Flex section to a site, and provide an overview of the components of a Flex section.

Adding a Flex Section

  • Hover between rows, and click the Add Section Button. Select the "Flex Sections" category. Choose a Flex Section (choose from a pre-designed section or a blank section). Click Save in the top menu.

  • Alternatively, you may open the context menu of a row by clicking the Row button or by right-clicking within a row, then select “Empty Flex Section”.

Flex Mode Overview

LAYERS PANEL

When working in Flex mode, a new menu option will appear in the sidebar menu: Layers.

The Layers panel shows the elements on the page: Grids, Widgets, Flexboxes, etc. From here, you may select, rearrange and rename elements. The Layers panel always starts with the section, followed by the grids, and then widgets or containers.

You may also navigate between elements in the following ways:

  • Click on the button for the currently active element in the editor, then select an element in the menu that appears above.


  • Click a breadcrumb link above the Design panel.



DESIGN PANEL

The Design panel can be found on the right side of the editor and contains styling controls for the selected element (Container, Flexbox, Widget). Design options include Layout, Sizing, Alignment, Stacking Direction and more.


When editing the tablet or mobile layouts you can adjust the columns layout independently of one another per screen size, allowing you to have a different column layout on each device.

Design Panel Sizing Measurements

There are multiple sizing measurements in Flex.

  • Pixel (px): The size stays the same on every breakpoint.
  • Percentage (%): Percentage is the percentage that the element will make up within the parent container. 
  • Viewport Width (vw): Percentage of the width of an element when displayed on a given screen. 10vw is 10% of the viewport width. 100 vw takes up 100% of the screen width. By default, margins and widget sizes are set in percentage.
  • Viewport Height (vh): Percentage of the height of an element when displayed on a given screen. 10vh is 10% of the viewport height on every screen size.
  • Auto (A): The size is automatically determined by content.
  • Min & Max: These are the smallest/largest measurements of an element. This setting ensures that an element does not get smaller/bigger than the set min/max size when resizing.

Align Menu

Select how the entire Flexbox will be aligned relative to the section. You can only align under the contrary axis.

You may also select where an element within a Flexbox (for example, a button) is aligned on the chosen auto layout axis.

Layout Menu

There are two different automatic alignment settings for Flexboxes in the Design panel.

  • Under Layout, select Vertical layout or Horizontal layout to set an axis for elements inside the Flexbox.

  • Under Auto Layout, select how elements will be placed in the selected axis, either vertically or horizontal.


Position Menu

You can pin elements to a specific position in a cell, so the location stays the same relative to the cell when the size of the cell changes.

To pin an element to a position in a cell:

  1. Select the element
  2. In the Design panel, scroll to Position.

  3. Next to Pin, click the arrow button corresponding to where you want to pin the element in the cell.


The element will stay pinned to this location in the cell when the grid size changes.

ADDING WIDGETS

Widgets can be added to a flex section by dragging and dropping directly from the widgets panel, into the flex section.

MOVING WIDGETS BETWEEN FLEX SECTIONS

Widgets can be moved between different flex sections on the same page, by simply dragging the widget from one section and dropping it directly into another.

BREAKPOINTS

A breakpoint is the size (using pixel width) where the design adjusts for a specific screen width. Breakpoints allow designs to be responsive as they scale up and down. In Flex, the default breakpoints are:

  • Desktop (1025px-1399px)
  • Wide desktop (1400px and up)
  • Tablet (768px-1024px)
  • Mobile (767px and below)
  • Mobile landscape (468px-767px)

You can switch between breakpoints at the top of the page by clicking the different view buttons.

You can also hide certain elements on specific breakpoints. For more information about breakpoints and how to hide elements, see the Flex Breakpoints doc.