Vertical Flex Widget

The Vertical 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 Vertical Flex  widget has a single menu (see Fig 1 below).

Fig 1

The Style menu for the Vertical 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 1 below), allows you to set the vertical and horizontal orientation of the Flex item group, the vertical 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 Vertical Flex widget is show in Fig 2 below. The Flex item group is vertically stacked, vertically 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 1

Fig 2

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


Fig 3

Fig 4

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


Fig 5

Fig 6

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


Fig 7


The spacing tool provides three options:

  • Space-Between - see Fig 8 below


Fig 8

  • Space-Around - see Fig 9 below


Fig 9

  • Space-Evenly - see Fig 10 below


Fig 10