Flex

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

See this kit in action in our sample UI

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

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

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

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: xxs | xs | sm | md | lg | xl | none

  • Setting the gap prop sets the row_gap || rowGap and the column_gap || 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

Display Flex


We
Are
Being
Flexed


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


Order


1
2
3
4

Props
  • display_flex | Type: Boolean
  • 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

  • order | Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first

  • 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

  • display_flex will either be true or false. If true, then the class will be applied to the kit

Flex Item - Align Self

Row


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

  • align_self | Type: String | Values: start | end | center | stretch

  • Align-self aligns the Flex Item on the cross axis. This prop may also be applied to the Flex kit and will act the same way.


UI Samples using Flex Kit

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

Available Props

Props Type Values

max_width
array
xs
sm
md
lg
xl
xxl
0
none

z_index
array
1
2
3
4
5
6
7
8
9
10

number_spacing
array
tabular

shadow
array
none
deep
deeper
deepest

line_height
array
tightest
tighter
tight
normal
loose
looser
loosest

display
array
block
inline_block
inline
flex
inline_flex
none

cursor
array
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut

flex_direction
array
row
column
rowReverse
columnReverse

flex_wrap
array
wrap
nowrap
wrapReverse

justify_content
array
start
end
center
spaceBetween
spaceAround
spaceEvenly

justify_self
array
auto
start
end
center
stretch

align_items
array
flexStart
flexEnd
start
end
center
baseline
stretch

align_content
array
start
end
center
spaceBetween
spaceAround
spaceEvenly

flex
array
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none

flex_grow
array
1
0

flex_shrink
array
1
0

order
array
1
2
3
4
5
6
7
8
9
10
11
12

position
array
relative
absolute
fixed
sticky

hover
array

border_radius
array
none
xs
sm
md
lg
xl
rounded

text_align
array
start
end
left
right
center
justify
justify-all
match-parent

overflow
array
visible
hidden
scroll
auto

truncate
array
1
2
3
4
5

left
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

top
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

right
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

bottom
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

overflow_x
array
visible
hidden
scroll
auto

overflow_y
array
visible
hidden
scroll
auto

margin
array
none
xxs
xs
sm
md
lg
xl

margin_bottom
array
none
xxs
xs
sm
md
lg
xl

margin_left
array
none
xxs
xs
sm
md
lg
xl

margin_right
array
none
xxs
xs
sm
md
lg
xl

margin_top
array
none
xxs
xs
sm
md
lg
xl

margin_x
array
none
xxs
xs
sm
md
lg
xl

margin_y
array
none
xxs
xs
sm
md
lg
xl

padding
array
none
xxs
xs
sm
md
lg
xl

padding_bottom
array
none
xxs
xs
sm
md
lg
xl

padding_left
array
none
xxs
xs
sm
md
lg
xl

padding_right
array
none
xxs
xs
sm
md
lg
xl

padding_top
array
none
xxs
xs
sm
md
lg
xl

padding_x
array
none
xxs
xs
sm
md
lg
xl

padding_y
array
none
xxs
xs
sm
md
lg
xl

classname
string

dark
boolean

id
string

data
hashprop

aria
hashprop

html_options
hashprop

children
proc
Props Type Values Default

align_self
enum
start
end
center
stretch
none
none

horizontal
enum
left
center
right
stretch
none
left

justify
enum
start
center
end
stretch
around
between
evenly
none
none

inline
boolean
false

orientation
enum
row
column
row

spacing
enum
around
between
evenly
none
none

gap
enum
xxs
xs
sm
md
lg
xl
none
none

row_gap
enum
xxs
xs
sm
md
lg
xl
none
none

column_gap
enum
xxs
xs
sm
md
lg
xl
none
none

reverse
boolean
false

vertical
enum
top
center
bottom
stretch
baseline
none
top

align
enum
start
center
end
stretch
baseline
none
none

wrap
boolean
false

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.
Contribute on GitHub
As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power
Open Positions
About Power

Connect

Dribbble
Github
Connect Chat
© 2023-24, ALL RIGHTS RESERVED