Flex

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

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

Gap


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


Responsive


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

Prop

gap | row_gap | column_gap | Type: String | Hash | Values: xxs | xs | sm | md | lg | xl | none

Setting the gap prop sets the row_gap and the column_gap props to the same size and creates equal space within a flex container.

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

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

You can also set responsive values by passing a hash with device sizes and values.

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.



Available Props

Props Type Values

align_content
enum | responsive
start
end
center
spaceBetween
spaceAround
spaceEvenly

align_items
enum | responsive
start
end
center

border_radius
enum
none
xs
sm
md
lg
xl
rounded

cursor
enum
auto
default
none
contextMenu
help
pointer
progress
wait
cell

dark
boolean
true
false

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

flex_direction
enum | responsive
row
column
rowReverse
columnReverse

flex_wrap
enum | responsive
wrap
nowrap
wrapReverse

justify_content
enum | responsive
start
end
center
spaceBetween
spaceAround
spaceEvenly

line_height
enum
loosest
looser
loose
normal
tight
tighter
tightest

margin_right
array
none
xxs
xs
sm
md
lg
xl

margin_left
array
none
xxs
xs
sm
md
lg
xl

margin_top
array
none
xxs
xs
sm
md
lg
xl

margin_bottom
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

margin
array
none
xxs
xs
sm
md
lg
xl

width
string

min_width
string

max_width
string

gap
string | responsive

column_gap
string | responsive

row_gap
string | responsive

number_spacing
enum
tabular

order
enum | responsive
none
first
1
2
3
4
5
6
7
8
9
10
11
12

overflow_x
enum
scroll
visible
hidden
auto

overflow_y
enum
scroll
visible
hidden
auto

overflow
enum
scroll
visible
hidden
auto

padding_right
array
none
xxs
xs
sm
md
lg
xl

padding_left
array
none
xxs
xs
sm
md
lg
xl

padding_top
array
none
xxs
xs
sm
md
lg
xl

padding_bottom
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

padding
array
none
xxs
xs
sm
md
lg
xl

position
enum
relative
absolute
fixed
sticky
static

shadow
enum
none
deep
deeper
deepest

text_align
enum | responsive
start
end
left
right
center
justify
justifyAll
matchParent

truncate
enum
none
1
2
3
4
5

vertical_align
enum | responsive
baseline
super
top
middle
bottom
sub
text-top
text-bottom

z_index
enum | responsive
1
2
3
4
5
6
7
8
9
10
max

top
enum | object
xxs
xs
sm
md
lg
xl
xxl

inset
boolean
true
false

right
enum | object
xxs
xs
sm
md
lg
xl
xxl

bottom
enum | object
xxs
xs
sm
md
lg
xl
xxl

left
enum | object
xxs
xs
sm
md
lg
xl
xxl

height
string

max_height
string

min_height
string

hover
object

group_hover
boolean
true
false
Props Type Values Default

horizontal
enum
left
center
right
stretch
none
left

justify
enum
start
center
end
around
between
evenly
none
none

inline
boolean
true
false
false

orientation
enum
row
column
row

spacing
enum
around
between
evenly
none
none

reverse
boolean
true
false
false

vertical
enum
top
center
bottom
stretch
baseline
none
top

align
enum
start
center
end
stretch
baseline
none
none

wrap
boolean
true
false
false

align_self
enum
start
end
center
stretch
none
none

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
Power Logo
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

Github
Connect Chat
© 2026-27, ALL RIGHTS RESERVED