10.12.0

Flex

This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.

!!!Attention these props will be deprecated in the future please use new props in their place
  • horizontal - Will be replaced with justify
  • vertical - Will be replaced with align
  • spacing - Will be removed. Use justify
  • Default

    Row


    1
    2
    3
    4


    Column


    1
    2
    3
    4

    Prop
  • orientation | Type: String | Values: row | column
  • Inline

    Row


    1
    2
    3
    4


    Column


    1
    2
    3
    4

    Prop
  • inline | Type: Boolean

  • By default this prop is false which sets the flex container to take up the full width of its parent container. When the prop is set to true the flex container sets its width to be the same size as the containing items.

  • Reverse

    Row


    1
    2
    3
    4


    Column


    1
    2
    3
    4

    Prop
  • reverse | Type: Boolean

  • When set to true this prop will reverse the order of items in the flex container.

  • Wrap

    Wrap


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10


    No Wrap


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    Prop
  • wrap | Type: Boolean

  • When set to true this prop will move the next item in flex container to a new line if there is no more room.

  • Spacing

    None


    1
    2
    3
    4


    Around


    1
    2
    3
    4


    Evenly


    1
    2
    3
    4


    Between


    1
    2
    3
    4

    Prop

    ATTENTION - the spacing prop will be deprecated & renamed in the future.

  • Deprecated Prop: spacing | Type: String | Values: none | around | evenly | between

  • New Prop: justify | Type: String | Values: none | around | evenly | between

  • Justify

    Row


    1
    2
    3
    4


    1
    2
    3
    4


    1
    2
    3
    4


    Column


    1
    2
    3
    4


    1
    2
    3
    4


    1
    2
    3
    4

    Prop

    ATTENTION - the horizontal prop will be deprecated & renamed in the future.

  • Deprecated Prop: horizontal | Type: String | Values: left | center | right | stretch | none

  • New Prop: justify | Type: String | Values: start | center | end | | none

  • Align

    Row


    1
    2
    3
    4


    1
    2
    3
    4


    1
    2
    3
    4


    1
    2
    3
    4


    1
    2
    3
    4


    Column


    1
    2
    3
    4


    1
    2
    3
    4


    1
    2
    3
    4


    1
    2
    3
    4

    Prop

    ATTENTION - the vertical prop will be deprecated & renamed in the future.

  • Deprecated Prop: vertical | Type: String | Values: top | center | bottom | stretch | baseline | none

  • New Prop: align | Type: String | Values: start | center | end | stretch | baseline | none

  • Gap

    Row


    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39


    Column Gap


    1
    2
    3
    4


    Row Gap


    1
    2
    3
    4

    Prop
  • gap | row_gap | rowGap | column_gap | columnGap | Type: String | Values: xs | sm | md | lg | xl | none

  • Setting the gap prop sets the rowgap || rowGap and the columngap || columnGap props to the same size and creates equal space within a flex container.

  • Setting the row_gap || rowGap prop creates space between rows in a flex container.

  • Setting the column_gap || columnGap prop creates space between columns in a flex container.

  • Flex Item

    Grow


    I'm growing
    1
    2
    3


    Shrink


    I'm shrinking
    1
    2
    3


    Fixed Size


    I'm 250px
    1
    2
    3


    Flex


    1
    2
    3
    4

    Props
  • flex | Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
  • fixed_size | Type: String | Values: Any CSS px or % value
  • grow | Type: Boolean
  • shrink | Type: Boolean

  • Flex is a short hand to set the flex item to take up (x) amount of available space

  • Setting Flex to 1 is equal to setting the grow & shrink prop to true

  • Setting Flex to 0 is equal to setting the grow & shrink prop to false

  • If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container


  • UI Samples using Flex Kit

    Get the full picture. See how this kit is used in our samples.

    Available Props

    • classname
    • dark
    • margin
    • margin_bottom
    • margin_left
    • margin_right
    • margin_top
    • margin_x
    • margin_y
    • max_width
    • padding
    • padding_bottom
    • padding_left
    • padding_right
    • padding_top
    • padding_x
    • padding_y
    • z_index
    • number_spacing
    • id
    • data
    • aria
    • children
    • horizontal
    • justify
    • inline
    • orientation
    • spacing
    • gap
    • row_gap
    • column_gap
    • reverse
    • vertical
    • align
    • wrap