小程序WXS:display属性

一、display属性系列一

1、display:none 不显示
2、display:inline 行内显示
3、display:block([块内]容器模式) 换行显示
4、display:inline-block 行内显示

二、效果

 

注意事项

1、display:inline和display:inline-block 虽然显示效果是一样的。
不同点:display:inline设置宽、高无效 display:inline-block设置宽、高有效
2、display:block 设置宽、高有效

三、display属性系列二

1、display:flex 弹性布局

配合属性

1、flex-direction:row:水平排列 row-reverse:水平翻转排列
column:竖直排列 column-reverse:竖直翻转排列
2、flex-wrap :nowrap(不换行,默认值) wrap(换行) wrap-reverse(与wrap的效果相反)

注意事项

1、屏幕宽度最大为750rpx ,当布局宽度大于此,则会压缩,自动调整各个子布局的宽高
2、flex-wrap :如果不想压缩显示,则使用此属性,换行显示

四、效果

 

 

 

 

 

 


参考
1、https://blog.csdn.net/u013673799/article/details/70157294/ ---王梵


 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值