默认 1 ，2，3 这几个项目都会堆叠到一块儿靠着屏幕的最上面显示 .. 在这个包装它们的 container 里面 .. 添加一个 justifyContent .. 它的值默认应该是 flex-start … 再把它设置成 center .. 这些项目在垂直居中显示在屏幕上 … 靠屏幕的底部显示，可以把这个值修改成 flex-end ..

在屏幕上还有很大一块儿空白的地方， 我们可以把这块地方平均分一下，放到每个项目之间 .. 把 justifyContent 的值设置成 space-between …

或者，也可以设置成 space-around ..

1,2,3 这几个项目默认的宽度就是整个屏幕的宽度 .. 这是因为它们的包装容器的 alignItems 这个属性默认的值是 stretch .. 在这个 container 里面，添加一个 alignItems .. 把它的值设置成 flex-start … 这样这些项目会靠着左边显示 .. 居中，可以设置成 center … 靠屏幕的右边显示，可以使用一个 flex-end ..

我们也可以单独控制每个项目的对齐方式 … 比如我想让 项目1 在屏幕左边显示 .. 找到 itemOne .. 在它里面用一个 alignSelf … 它的值设置成 flex-start ..

再修改一下 itemTwo 的 alignSelf 的值 … 把它设置成 center .. 现在 itemThree ，项目 3 的对齐方式就是在它的包装 container 里面用 alignItems 设置的 flex-end ..

再去掉这些样式 ..

现在我想让屏幕上的这三个项目平均分成几份 .. 在这个 item 样式里面，可以用一个 flex 属性，把它的值设置成 1 .. 这样会把刚才剩下的空间平均分一下，放到每个项目里面。

如果你想让某个项目多占点地方，可以单独去设置一下它的 flex 属性 .. 在这个 itemThree 的上面，用一个 flex .. 它的值设置成一个比 1 大的数 .. 比如设置成 2 ..

你会看到，现在 项目3 占的地方会比另外两个项目大一些 ..

现在这几个项目是堆叠在一块儿显示的 .. 我们可以让它们并排显示 .. 在这个 container 上面，添加一个 flexDirection .. 设置一下方向，默认它的值是 column … 这里我们把它设置成 row … 现在，这几个项目会并排显示 ..

你也可以使用刚才介绍的那些属性 .. 比如在 项目 2 的上面，把 alignSelf 的值设置成 'flex-end’ ..