­

Layout attributes:

Type

Property

Option Value

Default

special

@

format:  stylefilename/stylename

eg: system/title

Enumerate type

direction

inherit/ltr/rtl

inherit

flexDirection

col/col-reverse/

row/row-reverse

col

justifyContent

flex-start/

flex-end/ flex-end/ space-between/ space-around

flex-start

alignContent

auto/ flex-start/ center/ flex-end/ stretch/ baseline/ space-between/ space-around/

auto

alignItems

auto/ flex-start/ center/ flex-end/ stretch/ baseline/ space-between/ space-around/

auto

alignSelf

auto/ flex-start/ center/ flex-end/ stretch/ baseline/ space-between/ space-around/

auto

position

relative/ absolute

relative

flexWrap

no-wrap/ wrap/ wrap-reverse

no-wrap

overflow

visible/ hidden/ scroll

visible

display

flex/ none

flex

Number

flex

number value

0

flexGrow

0

flexShrink

0

borderLeftWidth

0

borderTopWidth

0

borderRightWidth

0

borderBottomWidth

0

borderStartWidth

0

borderEndWidth

0

borderWidth

0

aspectRatio

0

Point value & Percentage value

width

format:  number or percentage

eg:  300 or 50%

0

height

minWidth

minHeight

maxWidth

maxHeight

left

top

right

bottom

start

end

margin

marginLeft

marginTop

marginRight

marginBottom

marginStart

marginEnd

marginHorizontal

marginVertical

paddingLeft

paddingTop

paddingRight

paddingBottom

paddingStart

paddingEnd

paddingHorizontal

paddingVertical

padding

 

A complete guide to flexbox