### [小程序之如和使用view内部组件来进行页面的排版功能](https://www.prosaas.cn/article/17235)

**Published:** 2018-07-14T06:38:43

**Author:** 5201314

**Excerpt:** 这篇文章主要介绍了关于小程序之如和使用view内部组件来进行页面的排版功能，有着一定的参考价值，现在分享给大家…

这篇文章主要介绍了关于小程序之如和使用view内部组件来进行页面的排版功能，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

**涉及知识点：**

**1、垂直排列，水平排列**

**2、居中对齐**

**示例：**　　

**1、默认排版 ， 一个父组件里面两个子view**

　　　　![](https://img.php.cn/upload/article/000/000/009/3e24dfc2e5cc4d87859449ff80570225-0.png)

　　　　显示效果:

　　　　![](https://img.php.cn/upload/article/000/000/009/3e24dfc2e5cc4d87859449ff80570225-1.png)

**2、先给父view设置一个高度和颜色值，用于看效果**

　　　　![](https://img.php.cn/upload/article/000/000/009/3e24dfc2e5cc4d87859449ff80570225-2.png)

　　　　![](https://img.php.cn/upload/article/000/000/009/3e24dfc2e5cc4d87859449ff80570225-3.png)

　　　　![](https://img.php.cn/upload/article/000/000/009/3e24dfc2e5cc4d87859449ff80570225-4.png)

**3、实现水平排列和垂直排列的样式**  　　

　　　 水平排列：

　　　　![](https://img.php.cn/upload/article/000/000/009/e33571e392af756e3e06d6a105f16a6f-5.png)   ------> ![](https://img.php.cn/upload/article/000/000/009/e33571e392af756e3e06d6a105f16a6f-6.png)

　　　 垂直排列（不进行设置，默认垂直排列）：

　　　![](https://img.php.cn/upload/article/000/000/009/e33571e392af756e3e06d6a105f16a6f-7.png)\------>![](https://img.php.cn/upload/article/000/000/009/e33571e392af756e3e06d6a105f16a6f-8.png)

**4、实现居中效果**

居中效果分为两种情况，依赖于3中的水平排列还是垂直排列。

①、当水平排列的时候  ， justify-content:center ; 决定水平居中

　　　　![](https://img.php.cn/upload/article/000/000/009/e33571e392af756e3e06d6a105f16a6f-9.png) ------------------------> ![](https://img.php.cn/upload/article/000/000/009/e33571e392af756e3e06d6a105f16a6f-10.png)

②、当水平排列的时候，align-items:center; 决定垂直居中

　　　　　　![](https://img.php.cn/upload/article/000/000/009/da44dc8a14cb53aa27f06726b564b837-11.png)   ------------------------> ![](https://img.php.cn/upload/article/000/000/009/da44dc8a14cb53aa27f06726b564b837-12.png)

③、当垂直排列的时候，justify-content:center; 决定垂直居中

　　　　　　![](https://img.php.cn/upload/article/000/000/009/da44dc8a14cb53aa27f06726b564b837-13.png) ------------------------> ![](https://img.php.cn/upload/article/000/000/009/da44dc8a14cb53aa27f06726b564b837-14.png)

④、当垂直排列的时候，align-items:center;  决定水平居中

　　　　　　![](https://img.php.cn/upload/article/000/000/009/da44dc8a14cb53aa27f06726b564b837-15.png)\------------------------>![](https://img.php.cn/upload/article/000/000/009/da44dc8a14cb53aa27f06726b564b837-16.png)

⑤、当 align-items:center; 和 justify-content:center; 都存在的时候，不管父view怎么设置的排列方向，他的子view都是水平垂直都居中

　　　　　　![](https://img.php.cn/upload/article/000/000/009/da44dc8a14cb53aa27f06726b564b837-17.png)\------------------------>![](https://img.php.cn/upload/article/000/000/009/4d50ab6e10d8489796a85ef1d0f7f77b-18.png)

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

小程序之如何让swiper组件来实现轮播图的功能

小程序之动态控制组件的显示和隐藏

小程序之使用for循环绑定item的点击事件的实现

以上就是小程序之如和使用view内部组件来进行页面的排版功能的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---