微信小程序 View：flex 布局案例

stretch （auto 为继承父元素 align-items 属性，其他和 align-items 一致）

比如上面最后一个 baseline 的例子，我们把 item3 设置 align-self:flex-end;

就成了这个样子：

此外还有 flex-wrap 属性，用于控制子 View 是否换行，有3个值可选：

nowrap：不换行（默认）

wrap：换行

wrap-reverse：换行，第一行在最下面

还有子 View 有个 order 属性，可以控制子元素的排列顺序，默认为0。

比如还是上面那个例子，我们把 item3 设置 order:-1; 可以把 item3 排在前面

flex 常用布局就这些

写微信小程序的可以试试

最后，要是啥时候小程序能直接支持 bootstrap 就更好了

【相关推荐】

1. HTML5开发手机应用-详细介绍viewport的作用（图文）

2. 浅谈html5 响应式布局

3. HTML5 程序设计

4. 小程序开发之利用co处理异步流程的实例教程

以上就是微信小程序 View：flex 布局实例的详细内容，更多请关注php中文网其它相关文章！

关键词：微信小程序 View：flex 布局案例