微信小程序:属性display详细解析

display:block

小程序的3个视图容器(view,srcoll-view,swiper)默认值均为display:block

block表示[块内]容器模式,总是使用新行开始显示

display:flex

请添加图片描述

  • flex-direction属性,有下面4个可选值,默认为row
    • row:水平排列 (默认)
    • row-reverse:水平翻转排列
    • column:竖直排列
    • column-reverse:竖直翻转排列

flex属性值,自动调整各个子组件的宽度,一行排不开会被压缩

如果不想被压缩,就要用到另一个属性flex-wrap,它有3个属性值:

  • nowrap(不换行,默认值)
  • wrap(换行)
  • wrap-reverse(与wrap的效果相反)

对齐方式:align-items和justify-content

只有在display:flex时对齐方式才起作用,如果是display:block则不起作用。

  • align-items,子组件在侧轴(竖直)方向上的对齐方式

    • center,侧轴居中(在父组件宽度/高度上的居中,并不是屏幕宽度/高度居中)
    • flex-start,侧轴起始点开始
    • flex-end,侧轴终点开始
    • baseline,效果不明
    • stretch,效果不明
      请添加图片描述
  • justify-content,子组件在主轴(水平)方向上的对齐方式

    • center,主轴方向居中(在父组件高度/宽度上的居中,并不是屏幕高度/看宽度居中)
    • flex-start,主轴起始点对齐
    • flex-end,主轴结束点对齐
    • space-between,两端对齐,除了两端的子元素分别靠向两端的容器外,其余子元素之间的间隔都相等。
    • space-around,子元素之间的距离相等,两端子元素距离容器的距离是其它子元素之间的距离的1/2。
    • space-evenly,子元素之间的距离相等,两端子元素距离容器的距离和其它子元素之间的距离相同。
      请添加图片描述

display:none

控制view组件的显隐值,还有一个属性visibilityhidden值,也能让控件消失,但却会占位置,有一个空白位置,display:none会让组件消失,后面的组件占用他的位置。

请添加图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wuwuFQ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值