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

Posted 2022-12-16 wuwuFQ

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组件的显隐值，还有一个属性visibility的hidden值，也能让控件消失，但却会占位置，有一个空白位置，display:none会让组件消失，后面的组件占用他的位置。