当前位置: 首页 > news >正文

微信小程序display常用属性和子元素排列方式介绍

wxss中display常用显示属性与css一致,介绍如下:

针对元素本身显示的属性:

  1. display=block,元素显示换行
  2. display=inline,元素显示换行,但不可设置固定的宽度和高度,也不可设置上下方向的margin和padding值
  3. display=inline-block,元素显示换行,可设置固定的宽度和高度,margin和padding在所有方向可生效

针对子元素的显示属性display=flex,自身按照block显示,子元素按照配置flex模型显示,当设置display=flex,可设置子元素的模型属性包含:

display=flex时,子元素排列属性:

  1. align-items:控制子元素在当前行y轴的排列,center上下居中、flex-start顶部对齐、flex-end底部对齐、stretch上下顶格
  2. align-content:将子元素作为整体在父元素区域y轴排列,center左右居中、flex-start上对齐、flex-end下对齐、space-between上下两端对齐、space-arround每个元素上下填充的空白一致、space-evenly元素在上下之间的空白一致
  3. justify-content:将子元素作为整体在父元素区域x轴排列,center左右居中、flex-start左对齐、flex-end右对齐、space-between左右两端对齐、space-arround每个元素左右填充的空白一致、space-evenly元素在左右之间的空白一致

其他属性:

  1. 方向属性flex-direction:row从左到右、row-reverse从右到左、column从上到下、column-reverse从下到上
  2. 换行属性flex-wrap:nowrap不换行、wrap向下换行、wrap-reverse向上换行

align-item和align-content区别示例:

align-item=center

align-item=stretch

align-content=center

space-evenly、space-arround和space-between区别示例:

justify-content=space-evenly

justify-content=space-arround

justify-content=space-between

更多细节可以查看display - CSS: Cascading Style Sheets | MDN (mozilla.org)

更多微信小程序内容欢迎关注我! 

http://www.lryc.cn/news/229086.html

相关文章:

  • 设计模式—结构型模式之代理模式
  • C# PDF转HTML字符串
  • el-table解决数据过少小于高度有留白的问题
  • vue实现无感刷新token
  • 竞赛选题 深度学习的动物识别
  • Python高级语法----Python C扩展与性能优化
  • 行业洞察:分布式云如何助力媒体与娱乐业实现创新与增长?
  • 【多线程 - 05、后台线程】
  • C语言之文件操作(剩余部分)
  • 【PC】开发者日志:竞技比赛验证系统强化
  • c++用map,创建类似于python中的字典
  • VuePress介绍及使用指南
  • Spring-Security前后端分离权限认证
  • Django中Cookie和Session的使用
  • 云原生周刊:KubeSphere 3.4.1 发布 | 2023.11.13
  • 逐帧动画demo
  • Mongodb 中,与索引相关的监控指标
  • 图论14-最短路径-Dijkstra算法+Bellman-Ford算法+Floyed算法
  • OpenCV 实现透视变换
  • ChinaSoft 论坛巡礼|开源软件供应链论坛
  • VUE 组合式API
  • 尝试使用php给pdf添加水印
  • ubuntu上安装edge浏览器
  • 动态切换 Spring Boot 打包配置:使用 Maven Profiles 管理 JAR 和 WAR
  • 微信小程序使用阿里巴巴矢量图标
  • 使用JAVA pdf转word
  • 成都瀚网科技有限公司抖音带货的正规
  • windows服务器热备、负载均衡配置
  • samba服务器搭建 挂载远程目录 常用配置参数介绍
  • Ansible命令使用