布局

ES 的样式排版使用了 Flex 布局。值得注意的是，尚不兼容网页的百分比布局。

alignItems

alignItems决定了子元素在次轴方向的排列方式（此样式设置在父元素上）。例如若子元素本来是沿着竖直方向排列的（即主轴竖直，次轴水平），则alignItems决定了它们在水平方向的排列方式。此样式和CSS中的alignItems表现一致，默认值为stretch。

类型	必需
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')	否

alignSelf

alignSelf决定了元素在父元素的次轴方向的排列方式（此样式设置在子元素上），其值会覆盖父元素的alignItems的值。其表现和 CSS 上的align-self一致（默认值为auto）。

类型	必需
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')	否

borderBottomWidth

borderBottomWidth和 CSS 上的border-bottom-width表现一致。

类型	必需
number	否

borderLeftWidth

borderLeftWidth和 CSS 上的border-left-width表现一致。

类型	必需
number	否

borderRightWidth

borderRightWidth 和 CSS 上的border-right-width表现一致。

类型	必需
number	否

borderTopWidth

borderTopWidth和 CSS 上的border-top-width表现一致。

类型	必需
number	否

borderWidth

borderWidth和 CSS 上的border-width表现一致。

类型	必需
number	否

bottom

bottom 值是指将本组件定位到距离底部多少个逻辑像素（底部的定义取决于position属性）。

它的表现和 CSS 上的bottom类似，但注意在ES 上只能使用逻辑像素值（数字单位），而不能使用百分比、em、rem、vh 或是任何其他单位。

类型	必需
number	否

backgroundImage

backgroundImage 值可以直接传入背景图片地址，让这张图片渲染为一个View组件的背景图片。

类型	必需
string	否

如果使用本地图片需先在js中引入，app.vue中

点击查看源码

javascript

import img from './img'

img.js中引入所有需要在js变量中或背景图中使用的图片，本地调试时引用后会在dist/dev/assets目录中生成相应图片，

点击查看源码

javascript

import logo from './assets/logo.png';

使用时需在路径前加file://assets/图片名称

点击查看源码

css

.logo {
    background-image: url("file://assets/logo.png");
}

如果图片修改替换后没有变化可以尝试如下步骤

删除dist文件夹
重新运行npm run dev重新生成dist文件夹
清除容器缓存：执行 adb shell pm clear com.hili.mp.browse.debug
设置adb shell am broadcast -a com.hili.bct.test.CHANGE_DEBUG_HOST --es host 192.168.x.x:38989（电脑ip）

backgroundPositionX

backgroundPositionX 指定背景图片的初始位置的横轴X坐标。

类型	必需
number	否

backgroundPositionY

backgroundPositionY 指定背景图片的初始位置的竖轴Y坐标。

类型	必需
number	否

flex

在 ES 中 flex 的表现和 CSS 有些区别。 flex 在 ES 中只能为整数值。

类型	必需
number	否

flexBasis

flex-basis 指定了 flex 元素在主轴方向上的初始大小。

类型	必需
number	否

flexDirection

flexDirection 决定了容器的子元素的排列方向：row 代表水平排列, column 代表垂直排列。其他两个参数是反向排列。它跟 css 的 flex-direction 定义很像，但 css 是默认值为 row，而 ES 默认是 column。

类型	必需
enum('row', 'row-reverse', 'column', 'column-reverse')	否

flexGrow

flexGrow 定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

如果所有伸缩项目的 flex-grow 设置了 1，那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了 flex-grow 值为 2，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。

类型	必需
number	否

flexShrink

flexBasis 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

类型	必需
number	否

flexWrap

flexWrap 定义了子元素如何在接触到父容器底部时执行换行的行为。

类型	必需
enum('wrap', 'nowrap')	否

height

height 定义了容器的高度，单位为 pt

类型	必需
number,	否

justifyContent

justifyContent 定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。

类型	必需
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')	否

left

left 值是指将本组件定位到距离左边多少个逻辑像素（左边的定义取决于position属性）。

它的表现和 CSS 上的 left 类似，但注意在 ES 上只能使用逻辑像素值（数字单位），而不能使用百分比、em或是任何其他单位。

类型	必需
number	否

margin

设置 margin 与同时对marginTop, marginLeft, marginBottom, 和 marginRight设置了同样的值效果一致。

类型	必需
number	否

marginBottom

marginBottom 和 CSS 的 margin-bottom 类似。

类型	必需
number	否

marginHorizontal

设置 marginHorizontal 与同时设置 marginLeft and marginRight一个值效果一致.

类型	必需
number	否

marginLeft

marginLeft 与 CSS 的 margin-left 类似。

类型	必需
number	否

marginRight

marginRight 与 CSS 的 margin-right 类似。

类型	必需
number	否

marginTop

marginTop 和 CSS 的 margin-top 类似。

类型	必需
number	否

marginVertical

设置 marginVertical 与同时设置 marginTop and marginBottom一个值效果一致。

类型	必需
number	否

overflow

overflow 定义了子元素超过父容器宽高度后的显示情况 overflow: hidden 的情况会导致子元素被父容器切割超出显示范围的部分 overflow: visible 会让子容器正常显示全部，即使超出父容器的显示范围。

类型	必需
enum('visible', 'hidden')	否

padding

设置 padding 与同时设置paddingTop, paddingBottom, paddingLeft, 和 paddingRight一个值时效果一致。

类型	必需
number	否

paddingBottom

paddingBottom 与 CSS 的 padding-bottom 类似。

类型	必需
number	否

paddingHorizontal

设置 paddingHorizontal 与同时设置 paddingLeft 和 paddingRight一个值时效果一致.

类型	必需
number	否

paddingLeft

paddingLeft 与 CSS 的 padding-left 类似。

类型	必需
number	否

paddingRight

paddingRight 和 CSS 的 padding-right 类似。

类型	必需
number	否

paddingTop

paddingTop 和 CSS 的 padding-top 类似。

类型	必需
number	否

paddingVertical

设置 paddingVertical 与同时设置 paddingTop 和 paddingBottom一个值时效果一致.

类型	必需
number	否

position

position 在 ES 里表现与 CSS基本一致, 但是所有时候都是默认为 relative, 所以当元素设置 absolute 的时候可以保证永远只对上一级父元素绝对定位。

它和 CSS 的'position'属性类似，但 ES 内的position只有absolute与relative两个属性。

类型	必需
enum('absolute', 'relative')	否

right

right 值是指将本组件定位到距离右边多少个逻辑像素（右边的定义取决于position属性）。

它的表现和 CSS 上的right类似，但注意在React Native上只能使用逻辑像素值（数字单位），而不能使用百分比、em或是任何其他单位。

类型	必需
number	否

top

top 值是指将本组件定位到距离顶部多少个逻辑像素（顶部的定义取决于position属性）。

它的表现和 CSS 上的top类似，但注意在React Native上只能使用逻辑像素值（数字单位），而不能使用百分比、em或是任何其他单位。

类型	必需
number	否

width

width定义了容器的宽度

类型	必需
number	否

zIndex

zIndex 决定了容器排列的顺序。一般情况下，你无需直接使用 zIndex，容器元素会按照节点树的顺序依次渲染，在后面的元素会覆盖前面的元素（如果有覆盖情况的话）。zIndex 可以在你需要手动指定绘制层级的情况使用。

类型	必需
number	否