先来看一个示例
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
display:flex
-
flex-direction属性,有下面4个可选值,默认为row
- row:水平排列
- row-reverse:水平翻转排列
- column:竖直排列
- column-reverse:竖直翻转排列
-
上面的wxss中flex-direction的值为row(左)和row-reverse(右),运行图如下
可以发现,上面2个值的效果是正好相反的。
有一点需要注意,wxml中总共4个view,它们的宽的和为1000rpx,而屏幕宽度最大为750rpx,而view没有自动换行,说明一定是压缩了,这正是flex属性值的好处,自动调整各个子组件的宽度,与手机开发中的weight有异曲同工之处。
如果不想被压缩,怎么办?也简单,我们来插个队,说一下另一个属性flex-wrap,它有3个属性值:
- nowrap(不换行,默认值)
- wrap(换行)
- wrap-reverse(与wrap的效果相反)
分别来看一下3种属性值的效果图
nowrap类型,从下图可以看到,与没有设置该属性时完全一样,因为它是默认值。
wrap,从下图可以看出,由于加上第4个黑色框,整个宽度为1000rpx,超过了屏幕极限,所以换行了。
wrap-reverse,与wrap正好相反。
- 将flex-direction的值改为column(左)和column-reverse(右),运行图如下
column和column-reverse的效果也是相反的。
display:block
block表示[块内]容器模式,总是使用新行开始显示,小程序的3个视图容器(view,srcoll-view,swiper)默认值均为display:block
将wxss中的demo-view更改一下
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
再次运行程序,效果图如下:
对齐方式:align-items和justify-content
1,只有在display:flex时对齐方式才起作用,如果是display:block则不起作用。
2,主轴与侧轴的区别,请看下面的附录。
-
align-items,子组件在侧轴(竖直)方向上的对齐方式
- center,侧轴居中(在父组件宽度/高度上的居中,并不是屏幕宽度/高度居中)
- flex-start,侧轴起始点开始
- flex-end,侧轴终点开始
- baseline,效果不明
- stretch,效果不明
-
justify-content,子组件在主轴(水平)方向上的对齐方式
- center,主轴方向居中(在父组件高度/宽度上的居中,并不是屏幕高度/看宽度居中)
- flex-start,主轴起始点对齐
- flex-end,主轴结束点对齐
- space-between,两端对齐,除了两端的子元素分别靠向两端的容器外,其余子元素之间的间隔都相等。
- space-around,子元素之间的距离相等,两端子元素距离容器的距离和其它子元素之间的距离相同。
更改demo.wxss中的demo-view如下
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
其实只是将height改为了1000rpx,以前是100%,这样父组件的大小等于子组件的大小,就不会看到明显居中效果,所以改成了1000rpx。运行效果如下
为demo-view增加align-items属性,如下
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
运行效果如下
为demo-view增加justify-content属性,如下
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
运行效果如下图
下面还有空白,只是我没有截出来而已。
这次,我们把align-items属性和justify-content属性都加上
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
运行效果如下
居中测试完成,下面展示一下align-items的其它属性
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
-
flex-start(左)和flex-end(右)
-
baseline和stretch没有任何效果,原因不明
下面展示一下justify-content的其它属性
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- flex-start(左)和flex-end(右)
下面之所以还有空白,是因为父组件的宽度设置的为1000rpx,并不是屏幕高度。
- space-between(左)和space-around(右)
注意space-around和space-between的区别
display:none
为红色块设置这个属性值,如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
设置display:none前和设置后的的效果图如下:
运行效果如下:
可见,整个view组件不见了,还有一个属性visibility的hidden值,也能让控件消失,但却会占位置,如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
效果图如下
附录:各种属性的含义
可选值中,排在第一位的为默认值。
属性名 | 含义 | 可选值 |
---|---|---|
width | 组件宽度 | |
height | 组件高度 | |
background-color | 组件背景色 | |
visibility | 组件是否显示 | visible/hidden |
附录:主轴和侧轴
主轴与flex-direction属性密切相关,更详细的资料可看这里。
- row :从左到右的水平方向为主轴
- row-reverse:从右到左的水平方向为主轴
- column:从上到下的垂直方向为主轴
- column-reverse从下到上的垂直方向为主轴