Flex: Overview (Flex v1.0)

Note: this article covers Flex v1.0. If Flex was added to your site after July 18, 2022, see our "Flex: Overview (Flex 2.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 “Add 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 design controls for the selected element (container, flexbox, widget). Design options include layout, sizing, alignment, and more.

Design Panel Sizing Measurements

There are multiple sizing measurements in Flex.

  • Pixel (px): The size stays the same on every breakpoint.
  • 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.
  • 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 grid. 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 Align in Flexbox, select how elements will be placed in the selected axis.

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.

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.