Each Block on a Canvas is contained within a Flex - this is an element that sets the width of the Blocks that it contains. Similarly, Flexes are contained within a Layout (which is a full-width element in the browser window).

Flexes and Layouts

Flexes are designed to respond to the width of the browser window that they are viewed in; the browser window is divided into 12 virtual columns, and Flexes can be configured to span one or more of these columns. A diagram to demonstrate how Flexes of different widths are displayed in a Layout can be seen below:

Setting the width of a Flex is done via the Display Options JSON in the Flex, when viewing the Canvas Layout. An example JSON configuration of a Flex that is 8 columns wide can be seen below:

In the above JSON there are two entries:

  • "md8":true

  • "xs12":true

Each of these sets a different column span for a specific browser width. "md8":true configures a "medium desktop" (a typical desktop or laptop browser) to display this Flex across 8 columns (2/3 of the width of the browser), and "xs12":true configures an "extra small" (i.e. a mobile browser) to display this Flex across 12 columns (the full width of the browser).

Configuring multiple Flexes within a Layout

When configuring multiple Flexes within a Layout, it's important to consider the way that these Flexes will be displayed on both desktop and mobile browsers. Keep in mind that a full-width Layout is always 12 columns wide - so the flex width configurations should always add up to 12.

Below is a configuration for two Flexes within a Layout - so that the Flexes display as 2/3 and 1/3 the width of a Medium Desktop browser, but they both display the full width (stacked on top of each other) on a Mobile browser (click the image to view full size):

Note that the Layout Display Options JSON contains "wrap":true - ensuring this is set means that the Flexes will stack when they are viewed on a Mobile device.

Also note that the left Flex contains "md8":true and "xs12":true - which will ensure that the left Flex takes up 8 columns (2/3 width) on Desktop, and 12 columns (full width) on Mobile. Similarly, the right-hand Flex contains "md4":true and "xs12":true to set it to 1/3 on Desktop and full width on Mobile.

Updated for Jomablue 6.3 onwards

Did this answer your question?