一:概念
如果把某一个元素添加 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 以子元素的第一行文字对齐