📢 Don't fork this project. Use, contribute, or open issues through Store Discussion.

Flex Layout

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.

Screen Shot 2019-08-21 at 4 05 19 PM
Example of a page layout built using Flex Layout, following the one row with two columns model

Configuration

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.

flex-layout.row

Prop nameTypeDescriptionDefault value
blockClassStringBlock container class. This prop’s set value functions as a block identifier for CSS customizations. (""
borderColorStringThe color of the border.undefined
borderWidth0...5A number or string magnitude for the bw Tachyons token to be applied to the row.undefined
borderString \| String[]An array to define in which sides of the row a border should be applied to (top, right, bottom, left or all).undefined
colGap0...10A number or string magnitude for the pr Tachyons token to be applied to columns inside of the flex-layout.row.undefined
colSizingequal|autoControls the width of the columns inside the flex-layout.row.equal
fullWidthBooleanWhether or not the component should ocuppy all the available width from its parent.false
horizontalAlignleft|right|centerControls horizontal alignment for the items inside the flex-layout.row.left
marginBottom0...10A number or string magnitude for the mb Tachyons token to be applied to the row.undefined
marginTop0...10A number or string magnitude for the mt Tachyons token to be applied to the row.undefined
paddingBottom0...10A number or string magnitude for the pb Tachyons token to be applied to the row.undefined
paddingTop0...10A number or string magnitude for the pt Tachyons token to be applied to the row.undefined
preserveLayoutOnMobileBooleanWhether or not the flex-layout.row should break into a column layout on mobile.false
preventHorizontalStretchBooleanPrevents the row from stretching horizontally to fill its parent width.false
preventVerticalStretchBooleanPrevents the row from stretching vertically to fill its parent height with items-stretch token.false
rowGap0...10A number or string magnitude for the pb Tachyons token to be applied to columns inside of the flex-layout.row.undefined

flex-layout.col

Prop nameTypeDescriptionDefault value
blockClassStringBlock container class. This prop’s set value functions as a block identifier for CSS customizations""
borderColorStringThe color of the border.undefined
borderWidth0...5A number or string magnitude for the bw Tachyons token to be applied to the column.undefined
borderString \| String[]An array to define in which sides of the row a border should be applied to (top, right, bottom, left or all).undefined
horizontalAlignleft|right|centerControls horizontal alignment for the items inside the flex-layout.col.left
marginLeft0...10A number or string magnitude for the ml Tachyons token to be applied to the column.undefined
marginRight0...10A number or string magnitude for the mr Tachyons token to be applied to the column.undefined
paddingLeft0...10A number or string magnitude for the pl Tachyons token to be applied to the column.undefined
paddingRight0...10A number or string magnitude for the pr Tachyons token to be applied to the column.undefined
preventVerticalStretchBooleanPrevents the row from stretching vertically to fill its parent height with height: 100%, using height: "auto" instead.false
rowGap0...10A number or string magnitude for the pb Tachyons token to be applied to rows inside of the flex-layout.col.undefined
verticalAligntop|middle|bottomControls 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

Modus Operandi

  • 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

Customization

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