布局

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

---

<!-- toc -->

alignItems

[MDN 文档]

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

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

alignSelf

[MDN 文档]

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

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

backgroundImage

[MDN 文档]

backgroundImage 值可以直接传入背景图片地址或渐变色。

类型	必需
string	否

2.8.1 版本后支持终端本地图片能力，可通过 webpack file-loader 加载。

渐变色目前支持 linear-gradient 线性渐变 (最低支持版本 2.8.0） [MDN 文档]，支持使用 linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+) 格式; 其中 angle 支持 deg、turn、rad 单位；color-stop 支持设置多个颜色和百分比。DEMO： HippyReact HippyVue

注意：

• Android 如果使用 to [top | bottom] || [left | right] 四个顶角设置渐变角度，color-stop 不能使用百分比；
• iOS color-stop 百分比只能从小到大依次显式设置，不能部分省略，即 red 10%, yellow 20%, blue 50%，不能是 red 10%, yellow 20%, blue 10%

backgroundPositionX

[MDN 文档]

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

类型	必需
number	否

backgroundPositionY

[MDN 文档]

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

类型	必需
number	否

backgroundSize

[MDN 文档]

backgroundSize 设置背景图片大小。

类型	必需
enum('cover', 'contain')	否

collapsable

Android 里如果一个 View 只用于布局它的子组件，则它可能会为了优化而从原生布局树中移除，因此该节点 DOM 的引用会丢失 （比如调用 measureInAppWindow 无法获取到大小和位置信息）。 把此属性设为 false 可以禁用这个优化，以确保对应视图在原生结构中存在。(也可作为 View 的 Attribute 属性设置)， 默认值为 true。

类型	必需	支持平台
enum('false'， 'true'[default])	否	Android

display

Hippy 默认采用 Flex 布局。同时，因为仅支持 Flex 布局，所以不需要手写 display: flex 即可使用。

类型	必需
enum('flex')	否

flex

[MDN 文档]

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

类型	必需
number	否

flexBasis

[MDN 文档]

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

类型	必需
number	否

flexDirection

[MDN 文档]

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

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

flexGrow

[MDN 文档]

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

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

类型	必需
number	否

flexShrink

[MDN 文档]

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

类型	必需
number	否

flexWrap

[MDN 文档]

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

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

height

[MDN 文档]

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

类型	必需
number,	否

justifyContent

[MDN 文档]

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

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

left

[MDN 文档]

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

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

类型	必需
number	否

lineHeight

[MDN 文档]

lineHeight 属性用于设置多行元素的空间量，如多行文本的间距，hippy里仅支持设置具体数值。

类型	必需
number	否

margin

[MDN 文档]

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

类型	必需
number	否

marginBottom

[MDN 文档]

marginBottom 和 CSS 的 margin-bottom 类似。

类型	必需
number	否

marginHorizontal

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

类型	必需
number	否

marginLeft

[MDN 文档]

marginLeft 与 CSS 的 margin-left 类似。

类型	必需
number	否

marginRight

[MDN 文档]

marginRight 与 CSS 的 margin-right 类似。

类型	必需
number	否

marginTop

[MDN 文档]

marginTop 和 CSS 的 margin-top 类似。

类型	必需
number	否

marginVertical

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

类型	必需
number	否

maxHeight

[MDN 文档]

类型	必需
number	否

maxWidth

[MDN 文档]

类型	必需
number	否

minHeight

[MDN 文档]

类型	必需
number	否

minWidth

[MDN 文档]

类型	必需
number	否

overflow

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

!> 由于历史原因，Android 默认全部元素为 overflow: hidden, iOS 为 overflow: visible

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

padding

[MDN 文档]

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

类型	必需
numbe	否

paddingBottom

[MDN 文档]

paddingBottom 与 CSS 的 padding-bottom 类似。

类型	必需
number	否

paddingHorizontal

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

类型	必需
number	否

paddingLeft

[MDN 文档]

paddingLeft 与 CSS 的 padding-left 类似。

类型	必需
number	否

paddingRight

[MDN 文档]

paddingRight 和 CSS 的 padding-right 类似。

类型	必需
number	否

paddingTop

[MDN 文档]

paddingTop 和 CSS 的 padding-top 类似。

类型	必需
number	否

paddingVertical

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

类型	必需
number	否

position

[MDN 文档]

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

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

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

right

[MDN 文档]

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

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

类型	必需
number	否

textAlign

[MDN 文档]

textAlign 指定行内文字如何相对它的块父元素对齐，默认值为 left

类型	必需
enum('left', 'center', 'right')	否

top

[MDN 文档]

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

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

类型	必需
number	否

width

[MDN 文档]

width定义了容器的宽度

类型	必需
number	否

zIndex

[MDN 文档]

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

类型	必需
number	否