样式

Hippy 的所有样式支持由终端直接提供，基本和浏览器一致，但暂不支持百分比布局，但可以使用最新的 Flex 弹性布局。

内联样式

最简单的方式，我们可以用内联样式，直接定义容器如View，Text等的样式，用双括号包裹，示例代码如下：

import React from 'react';
import { View  } from '@hippy/react';
function InlineStyleDemo() {
  return (
    // 显示一个宽为100pt，高为100pt，背景颜色为红色的正方形在屏幕上
    return <View style={{ width: 100, height: 100, backgroundColor: 'red' }}/>;
  )
}

外部样式

当然，为了代码的整洁，我们更加推荐将样式用 StyleSheet 统一管理，类似 HTML 编程指定 DOM 的 Class 后，再统一在 CSS 书写 Class 对应的样式，示例代码如下：

import React from 'react';
import { View, StyleSheet, Text } from '@hippy/react';
class StyleSheetDemo extends React.Component {
  render() {
    // 显示一个红色背景色，字体为白色的按钮
    return (
      <View style={styles.buttonContainer}>
        <Text style={styles.buttonText} numberOfLines={1}/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  buttonContainer: {
    paddingHorizontal: 20,
    backgroundColor: 'red',
    borderRadius: 4,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText:{
    fontSize: 24,
    color: 'white',
  }
});

盒模型

Hippy 为了方便前端开发便于理解，样式也采用了 CSS 的盒模型构建。当 Hippy 在进行布局的时候，渲染引擎会根据 CSS-Box 模型将所有元素表示为一个矩形盒子，样式配置决定这些盒子的大小，位置以及属性（颜色，背景，边框尺寸…).

在 Hippy 中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。

PS: Hippy 的盒模型布局对应的是CSS的 box-sizing 属性的 border-box 类型，具体表现与宽高边距计算可参考MDN文档 box-sizing。

• width
• height
• padding
• margin
• border

长度单位

Hippy现在暂时不支持百分比的长度值，只支持具体数值（number）。单位为 dp，具体换算公式为：

实际真机长度值 = 屏幕缩放比例 * Hippy 样式长度值

屏幕缩放比例 可以通过PixelRatio.get()获取，如 iPhone 8 为 2，iPhone X 为 3，以 iPhone 8 为例：

• 屏幕真实宽度为 750px
• PixelRatio 为 2
• 所以 Hippy 的全屏宽度为750/2 = 375

布局（Flex）

Hippy中，为了方便移动端编写布局，所以默认支持了现在移动端最流行的Flex布局。同时，因为仅支持Flex布局，所以不需要手写 display: flex 即可使用 Flex 布局与 Web 的 Flex 类似，它们都旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。Flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。CSS 版教程文档可以参考这篇

flexDirection

flexDirection 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(水平或垂直)。

注意：Hippy 的 flexDirection 与 Web的 flex-direction Web 默认为 row, Hippy 默认为 column。

alignItems

alignItems 定义了伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式

• flex-start(默认值)：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
• flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
• center：伸缩项目的外边距盒在该行的侧轴上居中放置。
• baseline：伸缩项目根据他们的基线对齐。
• stretch：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

justifyContent

justifyContent 定义了伸缩项目沿着主轴线的对齐方式。

• flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
• flex-end：伸缩项目向一行的结束位置靠齐。
• center：伸缩项目向一行的中间位置靠齐。
• space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。
• space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

flex

flex 属性数值, 定义了 flex 容器的子节点项可以占用容器中剩余空间的大小。默认值为0，即不占用剩余空间。如果定义了 flex 数字且为正数的时候，则

每个元素占用的剩余空间=自己的 flex 数值 / 所有同一级子容器的 flex 数字之和

当 flex 设置为-1的时候，默认情况会显示正常宽高。然而， 如果剩余空间不足的话，此设置了flex: -1的容器将会收缩到其 minWidth 的宽度与 minHeight 的高度来显示。

flexBasis

flexBasis 设置伸缩基准值，剩余的空间按比率进行伸缩，负值无效，只能为 0 或正数。

flexGrow

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

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

flexShrink

flexShrink 定义伸缩项目收缩的能力。