Flex Layout is a layout structure built within VTEX IO store framework. It allows the construction of complex custom layouts using the concept of rows and columns, setting the desired structure and positioning of blocks in a given page.

Example of a page layout built using Flex Layout, following the one row with two columns model

There are two basic building blocks of Flex Layout: the flex-layout.row and the flex-layout.col. You should never use flex-layout.

If you are already familiar with the flexbox layout used in CSS, Flex Layout should be easy to get a grasp since that's what being used by flex-layout.row and flex-layout.col under the hood.

You can use any array of blocks as flex-layout.row and flex-layout.col children.

The props below support responsive-values, meaning that you can define to the same prop different values based on each device's screen size, such as mobile and desktop.

Prop name	Type	Description	Default value
blockClass	String	Block container class. This prop’s set value functions as a block identifier for CSS customizations. (	""
borderColor	String	The color of the border.	undefined
borderWidth	0...5	A number or string magnitude for the bw Tachyons token to be applied to the row.	undefined
border	String | String[]	An array to define in which sides of the row a border should be applied to (top, right, bottom, left or all).	undefined
colGap	0...10	A number or string magnitude for the pr Tachyons token to be applied to columns inside of the flex-layout.row.	undefined
colSizing	equal|auto	Controls the width of the columns inside the flex-layout.row.	equal
fullWidth	Boolean	Whether or not the component should ocuppy all the available width from its parent.	false
horizontalAlign	left|right|center|between|around	Controls horizontal alignment for the items inside the flex-layout.row. It defaults to between if colSizing is auto and to left otherwise.	left
colJustify	enum	Controls the space between columns and borders of the flex-layout.row, according to the justify-content CSS property. Possible values are between (adding no space between borders and columns) and around (adding the space).	between
marginBottom	0...10	A number or string magnitude for the mb Tachyons token to be applied to the row.	undefined
marginTop	0...10	A number or string magnitude for the mt Tachyons token to be applied to the row.	undefined
paddingBottom	0...10	A number or string magnitude for the pb Tachyons token to be applied to the row.	undefined
paddingTop	0...10	A number or string magnitude for the pt Tachyons token to be applied to the row.	undefined
preserveLayoutOnMobile	Boolean	Whether or not the flex-layout.row should break into a column layout on mobile.	false
preventHorizontalStretch	Boolean	Prevents the row from stretching horizontally to fill its parent width.	false
preventVerticalStretch	Boolean	Prevents the row from stretching vertically to fill its parent height with items-stretch token.	false
rowGap	0...10	A number or string magnitude for the pb Tachyons token to be applied to columns inside of the flex-layout.row.	undefined
htmlId	String	This prop adds an html id on flexRow and it can be changed from Site Editor. This enables the possibility to access a section from page using links.	undefined

Prop name	Type	Description	Default value
blockClass	String	Block container class. This prop’s set value functions as a block identifier for CSS customizations	""
borderColor	String	The color of the border.	undefined
borderWidth	0...5	A number or string magnitude for the bw Tachyons token to be applied to the column.	undefined
border	String | String[]	An array to define in which sides of the row a border should be applied to (top, right, bottom, left or all).	undefined
horizontalAlign	left|right|center	Controls horizontal alignment for the items inside the flex-layout.col.	left
marginLeft	0...10	A number or string magnitude for the ml Tachyons token to be applied to the column.	undefined
marginRight	0...10	A number or string magnitude for the mr Tachyons token to be applied to the column.	undefined
paddingLeft	0...10	A number or string magnitude for the pl Tachyons token to be applied to the column.	undefined
paddingRight	0...10	A number or string magnitude for the pr Tachyons token to be applied to the column.	undefined
preventVerticalStretch	Boolean	Prevents the row from stretching vertically to fill its parent height with height: 100%, using height: "auto" instead.	false
rowGap	0...10	A number or string magnitude for the pb Tachyons token to be applied to rows inside of the flex-layout.col.	undefined
verticalAlign	top|middle|bottom	Controls vertical alignment for the items inside the flex-layout.col.	top
width	"0...100%"|"grow"	Sets the width of the column. Accepts either a percentage or "grow".	undefined

• The highest level in a Flex Layout is always made of a row. Therefore, it is only possible to add a flex-layout.col inside of a flex-layout.row - never as a first-level block.
• Each row and column can have as many levels as needed.
• When creating levels, it is necessary to alternate between rows and columns. Within a row, you can only place columns, and within columns, only rows.
• Be mindful about the structure that you set in your flex layout does not only affect your code organization, but also reflects in the way that blocks will be shown and managed through the Site Editor admin. Therefore, it is always important to take the organization of both code and Site Editor into account when planning to apply the Flex Layout onto a page.

To better understand Flex Layout's practical operation, you can access the recipe on Using Flex Layout

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
flexColChild
flexCol
flexRowContent
flexRow