FlexRow

FlexRow is designed to lay out child widgets horizontally and proportionally from the available space given by its parent. By default, flexRow assigns equal space to each child (flex=1), but this can be customized to accommodate various design requirements.

Best Practices

• Use FlexRow when you need a horizontal layout with proportional space distribution among the children.
• Avoid using FlexRow in a scrollable parent, such as scrollable Row, without a fixed width, as it will lead to layout issues. FlexRow and its children need to be constrained to a definite size to properly calculate the flex distribution.
• Avoid using FlexRow in another Row. Row does not constrain its children's dimensions, which FlexRow requires to calculate the flex distribution. Instead consider giving the FlexRow a width or use all FlexRow(s) up the parent chain.

Key Concepts

• flex: Determines the space a child widget occupies relative to its siblings. By default, all children in a FlexRow have a flex value of 1 unless specified.
• flexMode: Dictates how a child widget uses its allocated space. It can be set to the below:.
  • expanded: The child will attempt to fill its allocated space based on the flex factor (this is the default).
  • flexible: The child occupies only the space it needs, up to its flex factor.
  • none: The child occupies the space it needs (flex factor is ignored).
• When laying out its children, FlexRow follows this specific order:
  • 1. Widgets with flexMode marked as none will be laid out first and receive all the space they need. Use caution as this can overflow the parent's available spaces (use 'flexible' is probably sufficient most of the time).
  • 2. Widgets marked as flexible are laid out next. They're allowed to occupy space up to their flex factor but can be smaller if they don't require all the space. This is useful for widgets that can size themselves according to their content but should be limited to a specific portion of the available space.
  • 3. The remaining space is then divided among expanded widgets according to their flex factors. These widgets are stretched to fill the allocated space, ensuring that all available space is used.

Usage

A simple FlexRow with three child widgets, each taking up equal space (all have flex=1 by default):

FlexRow:
  children:
    - Text:
        text: Child 1
    - Text: 
        text: Child 2
    - Text: 
        text: Child 3

Assigning different flex values to children to control their space distribution. In the example below, "Child 2" will occupy twice the space of "Child 1" and "Child 3":

FlexRow:
  children:
    - Text: 
        text: Child 1   # default flex=1 since not specified
    - Text: 
        text: Child 2
        styles:
          flex: 2
    - Text: 
        text: Child 3
        styles:
          flex: 1

Adjusting FlexMode to control how children occupy their allocated space. In the example below, "Flexible Child" will be laid out with the size it needs, up to a 1/3 of the available space. "Expanded Child" will be laid out next, occupy the rest of the available space, but not smaller than 2/3 of the available space (since Flexible can only grow to 1/3 max, and all available spaces will be used):

FlexRow:
  children:
    - Text:
        text: Flexible Child
        styles:
          flexMode: flexible
    - Text: 
        text: Expanded Child
        styles:
          flex: 2
          flexMode: expanded
 

Related

• See FlexColumn for a similar layout in the vertical direction.
• See Row for a more generic and scrollable container for laying out children horizontally.

Reference

Properties

Styles

Box Styles (Inherited)

box

Base Styles (Inherited)

base