Layout Attributes

Jump to bottom

zhenglibao edited this page Oct 24, 2020 · 7 revisions

There are three basic type attributes:

enumeration: the value can be one of the list
layout value: the value can be number or percentage, or none to remove, or auto
number value: the value must be number
@ is special attribute, the value should be filename/stylename. It can be used to reference style in other style file.

Enumeration & available values:

direction: inherit/ltr/rtl
flexDirection: col/col-reverse/row/row-reverse
justifyContent: flex-start/center/ flex-end/ space-between/ space-around / space-evenly
alignContent: auto/ flex-start/ center/ flex-end/ stretch/ baseline/ space-between/ space-around/
alignItems: auto/ flex-start/ center/ flex-end/ stretch/ baseline/ space-between/ space-around/
alignSelf: auto/ flex-start/ center/ flex-end/ stretch/ baseline/ space-between/ space-around/
position: relative/ absolute
flexWrap: no-wrap/ wrap/ wrap-reverse
overflow: visible/ hidden/ scroll
display: flex/ none

Number attributes:

flex
flexGrow
flexShrink
aspectRatio 宽高比

Layout value attributes:

// flexBasis、width和height除了可以设置数值、百分比类型外，还可以设置为auto来恢复为默认值

flexBasis
width
height

//以下值除了可以设置数值、百分比外，还可以设置为none来取消恢复为默认设置

minWidth
minHeight
maxWidth
maxHeight
left
top
right
bottom
start
end
margin 支持设置一个值和四个值两种格式，如果设置4个值，格式为左/上/右/下 // from 1.9.3
marginLeft
marginTop
marginRight
marginBottom
marginStart
marginEnd
marginHorizontal
marginVertical
paddingLeft
paddingTop
paddingRight
paddingBottom
paddingStart
paddingEnd
paddingHorizontal
paddingVertical
padding 支持设置一个值和四个值两种格式，如果设置4个值，格式为左/上/右/下 // from 1.9.3