### flex-layout.col App Behavior and Structure Rules

Source: https://github.com/vtex-apps/flex-layout/blob/master/docs/README.md

This section outlines the fundamental rules governing the usage and hierarchical structure of `flex-layout.col` within the VTEX IO flex layout system. Understanding these rules is crucial for correctly implementing and managing layouts.

```APIDOC
App Behavior Rules for flex-layout.col:
- 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.
- 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.
```

--------------------------------

### Flex Layout Row Component Properties Reference

Source: https://github.com/vtex-apps/flex-layout/blob/master/docs/README.md

This section details the configurable properties for the `flex-layout.row` component, including their data types, functional descriptions, and default settings. These properties control layout behavior, spacing, and element identification.

```APIDOC
Property: paddingTop
  Type: 0...10 (number or string magnitude)
  Description: Applies the 'pt' Tachyons token for top padding to the row.
  Default: undefined

Property: preserveLayoutOnMobile
  Type: Boolean
  Description: Determines if the flex-layout.row should break into a column layout on mobile devices.
  Default: false

Property: preventHorizontalStretch
  Type: Boolean
  Description: Prevents the row from stretching horizontally to fill its parent's width.
  Default: false

Property: preventVerticalStretch
  Type: Boolean
  Description: Prevents the row from stretching vertically to fill its parent's height, using the 'items-stretch' token.
  Default: false

Property: rowGap
  Type: 0...10 (number or string magnitude)
  Description: Applies the 'pb' Tachyons token for bottom padding to columns within the flex-layout.row.
  Default: undefined

Property: htmlId
  Type: String
  Description: Adds an HTML id to the flexRow, enabling access to the page section via links.
  Default: undefined
```

--------------------------------

### flex-layout.col CSS Customization Handles

Source: https://github.com/vtex-apps/flex-layout/blob/master/docs/README.md

This section lists the CSS handles available for `flex-layout.col` and related flex layout components, enabling developers to apply custom styles and themes. These handles provide specific points for CSS customization.

```APIDOC
CSS Handles for flex-layout.col Customization:
- `flexColChild`
- `flexCol`
- `flexRowContent`
- `flexRow`
```

--------------------------------

### flex-layout.col Component Properties

Source: https://github.com/vtex-apps/flex-layout/blob/master/docs/README.md

This section details the configurable properties for the `flex-layout.col` component, including layout, alignment, spacing, and border options. These properties allow developers to control the appearance and behavior of columns within a flex layout.

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

--------------------------------

### flex-layout.row Component Properties

Source: https://github.com/vtex-apps/flex-layout/blob/master/docs/README.md

Defines the configurable properties for the `flex-layout.row` component, controlling its appearance, layout, and behavior within a flex container.

```APIDOC
flex-layout.row Properties:
- blockClass:
    Type: String
    Description: Block container class. The set value of this prop functions as a block identifier for CSS customizations.
    Default: ""
- borderColor:
    Type: String
    Description: The color of the border.
    Default: undefined
- borderWidth:
    Type: 0...5
    Description: A number or string magnitude for applying the bw Tachyons token to the row.
    Default: undefined
- border:
    Type: String | String[]
    Description: An array to define on which sides of the row a border should apply (top, right, bottom, left, or all).
    Default: undefined
- colGap:
    Type: 0...10
    Description: A number or string magnitude for applying the pr Tachyons token to the columns in the flex-layout.row.
    Default: undefined
- colSizing:
    Type: equal|auto
    Description: Controls the width of the columns in the flex-layout.row.
    Default: equal
- fullWidth:
    Type: Boolean
    Description: Whether the component should occupy all the available width from its parent.
    Default: false
- horizontalAlign:
    Type: left|right|center|between|around
    Description: Controls horizontal alignment for the items in the flex-layout.row. It defaults to between if colSizing is auto and to left otherwise.
    Default: left
- colJustify:
    Type: enum
    Description: Controls 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).
    Default: between
- marginBottom:
    Type: 0...10
    Description: A number or string magnitude for applying the mb Tachyons token to the row.
    Default: undefined
- marginTop:
    Type: 0...10
    Description: A number or string magnitude for applying the mt Tachyons token to the row.
    Default: undefined
- paddingBottom:
    Type: 0...10
    Description: A number or string magnitude for applying the pb Tachyons token to the row.
    Default: undefined
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.