一、display属性系列一

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

二、效果

小程序WXS:display属性

 

注意事项

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 :如果不想压缩显示,则使用此属性,换行显示

四、效果

 

小程序WXS:display属性

 

 

小程序WXS:display属性

 

 

小程序WXS:display属性

 


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

小程序WXS:display属性


 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-21
  • 2021-11-10
  • 2021-08-16
  • 2022-01-08
猜你喜欢
  • 2021-12-03
  • 2021-12-26
  • 2022-02-03
  • 2022-12-23
  • 2021-11-21
  • 2021-12-25
  • 2021-06-12
相关资源
相似解决方案