微信小程序view排版怎么弄?

　　微信小程序view排版怎么弄?今天小编来为大家介绍微信小程序view排版的相关内容，作为微信小程序开发者，您知道微信小程序view排版怎么弄那?在下边的内容中，小编会教大家微信小程序view排版。

　　微信小程序view排版怎么弄?

　　微信小程序 View 支持两种布局方式：Block 和 Flex

　　所有 View 默认都是 block

　　要使用 flex 布局的话需要显式的声明：

　　display:flex;

　　下面就来介绍下微信小程序的 Flex 布局

　　先做一个简单的小程序demo：

　　.main {

　　width: 100%;

　　background-color: antiquewhite;

　　}

　　.item {

　　height: 100rpx;

　　width: 100rpx;

　　}

　　.item1 {

　　background-color: red;

　　}

　　.item2 {

　　background-color: dodgerblue;

　　}

　　.item3 {

　　background-color: greenyellow;

　　}

　　然后大概是这个样子的：

　　然后我们先都加上 display: flex

　　好使用 flex 小程序布局，主意，貌似 view 不会自动继承，需要在每个想使用的 view 里都加上。

　　首先是横向布局和竖向布局，要设置属* flex-direction ,它有4个可选值：

　　row：从左到右的水平方向为主轴

　　row-reverse：从右到左的水平方向为主轴

　　column：从上到下的垂直方向为主轴

　　column-reverse：从下到上的垂直方向为主轴

　　我们来看下设置 row 和 row-reverse 的区别：

　　row：

　　row-reverse：

　　然后我们要设置元素在横向上的布局方向，需要设置 justify-content 属*，它有5个值可选：

　　flex-start：主轴起点对齐(默认值)

　　flex-end：主轴结束点对齐

　　center：在主轴中居中对齐

　　space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等

　　space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

　　然后我们要设置元素在纵向上的布局方向，需要设置 align-items 属*，它有5个值可选：

　　stretch 填充整个容器(默认值)

　　flex-start 侧轴的起点对齐 (这里我们手动设置下小程序view的高度，来看的明显一些)

　　flex-end 侧轴的终点对齐

　　center 在侧轴中居中对齐

　　baseline 以子元素的第一行文字对齐

　　子 View 还有个属* align-self，可以覆盖父元素的 align-items 属*，它有6个值可选：auto | flex-start | flex-end | center | baseline | 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 就更好了

　　感谢各位亲们的观看，以上就是微信小程序view排版怎么弄的内容了，大家看完以上内容后都学会了吗?大家请多多的关注微小乔哦。感谢大家对本网的关注和支持哦。本网有更多的惊喜等着您。

相关推荐：

　　小程序修改数据页面不渲染怎么解决

　　微信小程序授权登录页面怎么开发

　　小程序开放更多页面内能力，让开发者更好地使用体验