小程序-wxss-flex布局

一：概念

如果把某一个元素添加 display：flex 的属性，那么这个元素当前已经成为了一个flex container 伸缩容器 ,里面的元素都是当前元素的子元素，成为 flex item（伸缩项目）。这里面的子元素都使用flex布局。

一：定义容器(父元素)；

display:flex;-reverse

（1）：定义主轴 flex-direction

有四个属性值；

• row：水平排列

• row-reverse：水平翻转排列

• column：竖直排列

• column-reverse：竖直翻转排列

（2）：flex-wrap

有一点需要注意，wxml中总共4个view，它们的宽的和为1000rpx，而屏幕宽度最大为750rpx，而view没有自动换行，说明一定是压缩了，这正是flex属性值的好处，自动调整各个子组件的宽度，与手机开发中的weight有异曲同工之处。

如果不想被压缩，怎么办？也简单，我们来插个队，说一下另一个属性flex-wrap，它有3个属性值：

• nowrap（不换行，默认值）

• wrap（换行）

• wrap-reverse（与wrap的效果相反）

二：对齐方式(子元素)；

（1）justify-conent 根据主轴对齐

• flex-start 主轴起点对齐(默认值)
• flex-end 主轴结束点对齐
• center 在主轴中居中对齐
• space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
• space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。

（2） align-items 根据竖轴对齐

• stretch 填充整个容器(默认值)
• flex-start 侧轴的起点对齐
• flex-end 侧轴的终点对齐
• center 在侧轴中居中对齐
• baseline 以子元素的第一行文字对齐