Horizontal Flex Widget

The Horizontal Flex widget allows you to create horizontal (or vertical) grouping of elements and add them to the landing page grid section or as a "child" element to another container widget such as the Carousel widget.


The Horizontal Flex  widget has a single menu (see Fig 1 below).

Fig 1

The Style menu for the Horizontal Flex widget conforms to the general Style menu as described in this article: Style Menu Article, but also contains one multi-part additional feature as described below.

The Alignment feature (see Fig 2 below), allows you to set the vertical and horizontal orientation of the Flex item group, the horizontal alignment (justification) of the Flex item group, and the spacing between the individual Flex items subject to the limitations imposed by the size of the Flex container itself.

The default layout of Horizontal Flex widget is show in Fig 3 below. The Flex item group is horizontally stacked, horizontally centered, with no spacing between the individual Flex items. For illustration purposes, the Flex container and individual Flex items have been assigned various fill colors and borders. 

Fig 2

Fig 3

  • The first feature tool is the Flex item group orientation. See Fig 4 below. As noted above, the default orientation is horizontal. Fig 5 below shows the results of selecting a vertical orientation. 


Fig 4 


Fig 5

  • The next feature tool is the Flex item group alignment. See Fig 6 below. As noted above, the default alignment is centered. Fig 7 below shows the results of selecting a left alignment. 


Fig 6


Fig 7

  • The third feature tool is the Flex item spacing tool. See Fig 8 below. As noted above, the default spacing is no space between the items. 


Fig 8


The spacing tool provides three options:

  • Space-Between - see Fig 9 below


Fig 9

  • Space-Around - see Fig 10 below


Fig 10

  • Space-Evenly - see Fig 11 below


Fig 11