Grid: The vertical and horizontal lines that give structure to the Flex Sections. Grids do not have content, but they enable you to arrange your content.
Cell:
The space created by the vertical and horizontal lines of the grid. In a single grid, all cells are the same size.
Flexbox:
Elements inside a flexbox stay fixed along a vertical or horizontal axis, and can be manipulated all at once. Reposition them in the Section, duplicate them, etc.
Container:
Elements can be placed anywhere you want inside a container. Their position will stay relative inside the container and at all breakpoints.
Breakpoint:
Point where a design adjusts for a specific screen width, enabling design to be responsive as it scales up and down. Default breakpoints are: main desktop (1025px-1399px), wide desktop (1400px and above), tablet (768px-1024px), mobile (767px and below), and mobile landscape (468px-767px).
Layers panel:
Left-side panel that displays the elements in the Section (grids, widgets, text boxes, etc.). From here, you can select, rearrange and hide elements.
Design panel:
Right-side panel that displays design controls for layout, sizing, alignment and more.
Learn tab:
Access tutorials, videos and onboarding from here.
Sizing:
You have multiple sizing options in Flex.
- A:
Size automatically determined by content.
- Pixel (px): Size stays the same on every screen size.
- Viewpoint width (vw):
Percent of width when displayed on a given screen. 10vw is 10% of the viewport width. 100 vw takes up 100% of the screen width.
- Viewpoint height (vh):
Percent of height when displayed on a given screen. 10vh is 10% of the viewport height on every screen size.
- Min & max:
Smallest/largest measurement of an element. This setting ensures that an element does not get smaller/bigger than this when resizing.
