微信小程序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.rhkb.cn/news/192453.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机视觉:人脸识别与检测

目录 前言 识别检测方法 本文方法 项目解析 完整代码及效果展示 前言 人脸识别作为一种生物特征识别技术,具有非侵扰性、非接触性、友好性和便捷性等优点。人脸识别通用的流程主要包括人脸检测、人脸裁剪、人脸校正、特征提取和人脸识别。人脸检测是从获取的图…

ReportLab创建合同PDF

一、前言 有一个项目需要将电子签名后的报价合同和生成的发票发送给客户,这种发送给客户的文件一般都是使用PDF格式,主要是因为PDF特别适合阅读且不同平台打开文件格式不会变形,不过要在程序中生成PDF还是比较麻烦的,我们的发票是…

Fortinet 聚焦核心业务增长领域,巩固网安市场领导地位,持续推动行业创新

近日,专注于推动网络与安全融合的全球网络安全领导者 Fortinet(NASDAQ:FTNT)发布第三季度财报。同期,Fortinet做出重大战略宣布,未来将重点聚焦高速增长的差异化市场。Fortinet 将紧紧围绕安全组网、Univer…

Jenkins入门——安装docker版的Jenkins 配置mvn,jdk等 使用案例初步 遇到的问题及解决

前言 Jenkins是开源CI&CD软件领导者, 提供超过1000个插件来支持构建、部署、自动化, 满足任何项目的需要。 官网:https://www.jenkins.io/zh/ 本篇博客介绍docker版的jenkins的安装和使用,maven、jdk,汉语的配置…

docker安装AWVS 23.9.231005181

本文声明仅AWVS用作学习使用 将镜像文件secfa_awvs.tar复制到目标机器上。 我的百度网盘文件路径: 链接:https://pan.baidu.com/s/1Pe4qlVp9XKbZ3dLrouaP2w 提取码:67mc –来自百度网盘超级会员V6的分享 在目标机器上,使用以下命…

Git-工作流

前言 一、工作流概述二、Git flow1.主要流程2.优缺点3.适用场景 三、Github flow1.主要流程2.优缺点3.适用场景 四、Gitlab flow1.主要流程2.优缺点3.适用场景 总结参考 一、工作流概述 开发人员通过Git可以记录和追踪代码的变化,包括添加、删除和修改文件。如果是…

NLP在网安领域中的应用(初级)

NLP在网安领域的应用 写在最前面NLP在网络安全中的角色案例分析 NLP技术的关键应用最新行业数据和研究1. 威胁情报分析1.1 社交媒体情报分析(后面有详细叙述)1.2 暗网监测与威胁漏洞挖掘 2. 恶意软件检测2.1 威胁预测与趋势分析 3. 漏洞管理和响应4. 社交…

python数据处理作业4:使用numpy数组对象,随机创建4*4的矩阵,并提取其对角元素

每日小语 真理诚然是一个崇高的字眼,然而更是一桩崇高的业绩。如果人的心灵与情感依然健康,则其心潮必将为之激荡不已。——黑格尔 难点:如何创建?取对角元素的函数是什么? gpt代码学习 import numpy as np# 随机创…

Istio学习笔记-体验istio

参考Istio 入门(三):体验 Istio、微服务部署、可观测性 - 痴者工良 - 博客园 (cnblogs.com) 在本章中,我们将会学习到如何部署一套微服务、如何使用 Istio 暴露服务到集群外,并且如何使用可观测性组件监测流量和系统指标。 本章教程示例使用…

Haproxy实现七层负载均衡

目录 Haproxy概述 haproxy算法: Haproxy实现七层负载 ①部署nginx-server测试页面 ②(主/备)部署负载均衡器 ③部署keepalived高可用 ④增加对haproxy健康检查 ⑤测试 Haproxy概述 haproxy---主要是做负载均衡的7层,也可以做4层负载均衡 apache也可…

haproxy端口耗尽no free ports

用haproxy配置负载均衡时出现端口不足错误;后端服务连接一会高一会儿低,从0到1w、2w跳变;实际连接数为4w左右; haproxy[8765]: Connect() failed for backend 09e581: no free ports. 问题描述 在请求很少的时候,工作…

VS Code打造Rust的开发环境

文章目录 rust-analyzerCodeLLDB Rust据说是一门永远也不会发生内存错误的语言,并且因其反人类的学习曲线,而长期占据编程鄙视链的最顶端。而且就连微软都准备把Windows挪到Rust上面,可见其受欢迎程度。 rust-analyzer 在插件栏中直接搜索r…

hadoop 大数据集群环境配置 配置hadoop配置文件 hadoop(七)

1. 虚拟机的三台机器分别以hdfs 存储, mapreduce计算,yarn调度三个方面进行集群配置 hadoop 版本3.3.4 官网:Hadoop – Apache Hadoop 3.3.6 jdk 1.8 三台机器尾号为:22, 23, 24。(没有用hadoop102, 103,10…

Mybatis报错找不到参数解决之编译保留参数名称

Hi, I’m Shendi Mybatis报错找不到参数解决之编译保留参数名称 需求场景 在使用 Mybatis 的过程中,对于函数参数,通常会加上 Param 注解来给参数命名,以让 Mybatis 找到参数。 有的时候忘记添加,执行时就会报找不到参数的错误&…

STM32——端口复用与重映射概述与配置(HAL库)

文章目录 前言一、什么是端口复用?什么是重映射?有什么区别?二、端口复用配置 前言 本篇文章介绍了在单片机开发过程中使用的端口复用与重映射。做自我学习的简单总结,不做权威使用,参考资料为正点原子STM32F1系列精英…

超越任务调度的极致:初探分布式定时任务 XXL-JOB 分片广播

XXL-JOB 是一个分布式任务调度平台&#xff0c;支持分片任务执行。 1. 依赖引入 在项目中引入 XXL-JOB 的相关依赖。通常&#xff0c;你需要在项目的 pom.xml 文件中添加如下依赖&#xff1a; <dependency><groupId>com.xuxueli</groupId><artifactId&…

飞天使-template模版相关知识

遇到报错django.template.exceptions.TemplateSyntaxError: ‘staticfiles’ is not a registered tag library. Must ROOT_URLCONF TEMPLATES [{BACKEND: django.template.backends.django.DjangoTemplates,DIRS: [os.path.join(BASE_DIR, templates)],APP_DIRS: True,OPTI…

处理本地DNS劫持,导致域名解析失败

回顾情形 在公司内网&#xff0c;有同事反馈appstoreconnect.apple.com网站需要通过代理才能正常访问。 向我这边询问&#xff0c;否修改过路由策略&#xff1b; 检测域名 通过域名ping检测网址&#xff0c;https://ping.chinaz.com/astrill.com&#xff0c;来ping域名apps…

CTFSHOW 文件上传

web151 JS前端绕过 直接上传 png的图片马 然后抓包修改为php asystem("ls /var/www/html"); asystem("cat /var/www/html/flag.php"); web152 和151一样的方法也可以实现上传 asystem("ls /var/www/html"); asystem("cat /var/www/html…

当路由器突然提示“未检测到入户网线”

找到浏览器的“安全DNS”&#xff0c;根据浏览器不同可能有差别。 开启安全DNS&#xff0c;使用“自定义” 地址用阿里的&#xff08;其它的也行&#xff09;&#xff1a; https://dns.alidns.com/dns-query{?dns}