Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Layout Apps
Flex Layout
Official extension
Version: 0.21.3
Latest version: 0.21.3

Flex Layout is a layout structure built within VTEX IO Store Framework. It allows building complex custom layouts using the concept of rows and columns, setting the desired block structure and positioning in a page.

{"base64":"  ","img":{"width":1502,"height":899,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":255232,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-flex-layout-0.png"}}
Example of a page layout built using Flex Layout, following the one row with two columns model

Configuration

Flex Layout has two basic building blocks: flex-layout.row and 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 grasp since this is what flex-layout.row and flex-layout.col are using under the hood.

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

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

flex-layout.row

Prop nameTypeDescriptionDefault value
blockClassStringBlock container class. The set value of this prop functions as a block identifier for CSS customizations. (""
borderColorStringThe color of the border.undefined
borderWidth0...5A number or string magnitude for applying the bw Tachyons token to the row.undefined
borderString | String[]An array to define on which sides of the row a border should apply (top, right, bottom, left, or all).undefined
colGap0...10A number or string magnitude for applying the pr Tachyons token to the columns in the flex-layout.row.undefined
colSizingequal|autoControls the width of the columns in the flex-layout.row.equal
fullWidthBooleanWhether the component should occupy all the available width from its parent.false
horizontalAlignleft|right|center|between|aroundControls horizontal alignment for the items in the flex-layout.row. It defaults to between if colSizing is auto and to left otherwise.left
colJustifyenumControls the space between columns and borders of the flex-layout.row, following the justify-content CSS property. Possible values are between (no space added between borders and columns) and around (space added).between
marginBottom0...10A number or string magnitude for applying the mb Tachyons token to the row.undefined
marginTop0...10A number or string magnitude for applying the mt Tachyons token to the row.undefined
paddingBottom0...10A number or string magnitude for applying the pb Tachyons token to the row.undefined
paddingTop0...10A number or string magnitude for applying the pt Tachyons token to the row.undefined
preserveLayoutOnMobileBooleanWhether the flex-layout.row should break into a column layout on mobile.false
preventHorizontalStretchBooleanPrevents the row from stretching horizontally to fill its parent's width.false
preventVerticalStretchBooleanPrevents the row from stretching vertically to fill its parent's height with the items-stretch token.false
rowGap0...10A number or string magnitude for applying the pb Tachyons token to columns in the flex-layout.row.undefined
htmlIdStringThis prop adds an HTML id to flexRow. This allows accessing a page section using links.undefined

flex-layout.col

Prop nameTypeDescriptionDefault value
blockClassStringBlock container class. The set value of this prop functions as a block identifier for CSS customizations""
borderColorStringThe color of the border.undefined
borderWidth0...5A number or string magnitude for applying the bw Tachyons token to the column.undefined
borderString | String[]An array to define on which sides of the row a border should apply (top, right, bottom, left, or all).undefined
horizontalAlignleft|right|centerControls horizontal alignment for the items in the flex-layout.col.left
marginLeft0...10A number or string magnitude for applying the ml Tachyons token to the column.undefined
marginRight0...10A number or string magnitude for applying the mr Tachyons token to the column.undefined
paddingLeft0...10A number or string magnitude for applying the pl Tachyons token to the column.undefined
paddingRight0...10A number or string magnitude for applying the pr Tachyons token to the column.undefined
preventVerticalStretchBooleanPrevents the row from stretching vertically to fill its parent's height with height: 100%, using height: "auto" instead.false
rowGap0...10A number or string magnitude for applying the pb Tachyons token to rows in the flex-layout.col.undefined
verticalAligntop|middle|bottomControls vertical alignment for the items in the flex-layout.col.top
width"0...100%"|"grow"Sets the width of the column. Accepts either a percentage or "grow".undefined

App behavior

  • The highest level in a flex layout is always a row. Therefore, you can only add a flex-layout.col inside a flex-layout.row — never as a first-level block.
  • Every row and column can have as many levels as needed.
  • When creating levels, you have to alternate between rows and columns. You can only place columns within a row and rows within a column.
  • Keep in mind that the structure that you set in your flex layout does not only affect your code organization, but will also reflect 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 to a page.

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

Customization

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

CSS Handles
flexColChild
flexCol
flexRowContent
flexRow
See also
VTEX App Store
VTEX IO Apps