微信小程序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.mzph.cn/news/142847.shtml

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

相关文章

Python | 机器学习之聚类算法

​🌈个人主页:Sarapines Programmer🔥 系列专栏:《人工智能奇遇记》🔖少年有梦不应止于心动,更要付诸行动。 目录结构 1. 机器学习之聚类算法概念 1.1 机器学习 1.2 聚类算法 2. 聚类算法 2.1 实验目的…

Riskified: 2023年电商政策滥用问题恶化,正严重挑战商家盈利底线

2023年11月14日,中国上海 —— 近日,由全球领先的电子商务欺诈和风险智能解决方案提供商 Riskified 发布的《政策滥用及其对商家的影响:2023年全球参考基准》报告显示,政策滥用问题正进一步恶化,超过九成电商商家正在承…

七个优秀微服务跟踪工具

随着微服务架构复杂性的增加,在问题出现时确定问题的根本原因变得更具挑战性。日志和指标为我们提供了有用的信息,但并不能提供系统的完整概况。这就是跟踪的用武之地。通过跟踪,开发人员可以监控微服务之间的请求进度,从而使他们…

WebSocket真实项目总结

websocket websocket是什么? websocket是一种网络通讯协议。 websocket 是HTML5开始提供的一种在单个TCP链接上进行全双工通讯的协议。 为什么需要websocket? 初次接触websocket,都会带着疑惑去学习,既然已经有了HTTP协议,为什么还需要另一…

【数据结构】——单链表(增删查改)

目录 前言: 一:单链表的特点 ​编辑 二:单链表实现 单链表定义 2.1申请节点(初始化) 2.2单链表尾插 ​编辑 2.3单链表打印 2.4单链表头插 2.5单链表尾删 2.6单链表头删 2.7单链表查找 2.8在目标位置后面插入…

通用结构化剪枝DepGraph

文章目录 0. 前言一. 第一部分: Torch-Pruning1.1 传统的剪枝流程 - ResNet-18结构化剪枝1.2 Torch-Pruning剪枝 - ResNet-18结构化剪枝1.3 Torch-Pruning剪枝 - 遍历所有分组1.4 Torch-Pruning剪枝 - 剪枝器 High-level Pruners1.5 Torch-Pruning剪枝 - 拓展到更复杂的神经网…

基于入侵杂草算法优化概率神经网络PNN的分类预测 - 附代码

基于入侵杂草算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于入侵杂草算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于入侵杂草优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要:针对PNN神…

Python机器学习、深度学习提升气象、海洋、水文领域实践应用

Python是功能强大、免费、开源,实现面向对象的编程语言,能够在不同操作系统和平台使用,简洁的语法和解释性语言使其成为理想的脚本语言。除了标准库,还有丰富的第三方库,Python在数据处理、科学计算、数学建模、数据挖…

【Apifox】国产测试工具雄起

在开发过程中,我们总是避免不了进行接口的测试, 而相比手动敲测试代码,使用测试工具进行测试更为便捷,高效 今天发现了一个非常好用的接口测试工具Apifox 相比于Postman,他还拥有一个非常nb的功能, 在接…

vue-组件通信(动态组件)

​🌈个人主页:前端青山 🔥系列专栏:Vue篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-组件通信|动态组件 目录 组件通信 1.父传子 2.子传父 3.ref 4.兄弟组件 5.跨层级 provid…

Xilinx Zynq 7000系列中端FPGA解码MIPI视频,基于MIPI CSI-2 RX Subsystem架构实现,提供5套工程源码和技术支持

目录 1、前言免责声明 2、我这里已有的 MIPI 编解码方案3、本 MIPI CSI2 模块性能及其优缺点4、详细设计方案设计原理框图OV5640及其配置权电阻硬件方案MIPI CSI-2 RX SubsystemSensor Demosaic图像格式转换Gammer LUT伽马校正VDMA图像缓存AXI4-Stream toVideo OutHDMI输出 5、…

【JavaEE】Servlet(创建Maven、引入依赖、创建目录、编写及打包、部署和验证、smart Tomcat)

一、什么是Servlet? Servlet 是一种实现动态页面的技术. 是一组 Tomcat 提供给程序猿的 API, 帮助程序猿简单高效的开发一个 web app 1.1 Servlet能干什么? 🚕允许程序猿注册一个类, 在 Tomcat 收到某个特定的 HTTP 请求的时候, 执行这个类…

P3371 【模板】单源最短路径(弱化版)

【模板】单源最短路径(弱化版) 题目背景 本题测试数据为随机数据,在考试中可能会出现构造数据让SPFA不通过,如有需要请移步 P4779。 题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路…

Kotlin基础——接口和类

接口 使用 : 表示继承关系&#xff0c;只能继承一个类&#xff0c;但可以实现多个接口override修饰符表示重写可以有默认方法&#xff0c;若父类的默认方法冲突&#xff0c;则需要子类重写&#xff0c;使用super<XXX>.xxx()调用某一父类方法 interface Focusable {fun …

SQL学习之增删改查

文章目录 数据库数据类型建表create table插入数据insert into查询数据select from修改数据update set删除数据delete from备份ctas结果插入iis截断表 truncate table修改表结构alter table添加注释 注&#xff1a;本文的SQL语法是基于Oracle数据库操作的&#xff0c;但是基本的…

开源软件 FFmpeg 生成模型使用图片数据集

本篇文章聊聊&#xff0c;成就了无数视频软件公司、无数在线视频网站、无数 CDN 云服务厂商的开源软件 ffmpeg。 分享下如何使用它将各种视频或电影文件&#xff0c;转换成上万张图片数据集、壁纸集合&#xff0c;来让下一篇文章中的模型程序“有米下锅”&#xff0c;这个方法…

⑨【MySQL事务】事务开启、提交、回滚,事务特性ACID,脏读、幻读、不可重复读。

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ MySQL事务 ⑨【事务】1. 事务概述2. 操作事务3…

若依Linux与Docker集群部署

若依Linux集群部署 1. 若依2.MYSQL Linux环境安装2.1 MYSQL数据库部署和安装2.2 解压MYSQL安装包2.3 创建MYSQL⽤户和⽤户组2.4 修改MYSQL⽬录的归属⽤户2.5 准备MYSQL的配置⽂件2.6 正式开始安装MYSQL2.7 复制启动脚本到资源⽬录2.8 设置MYSQL系统服务并开启⾃启2.9 启动MYSQL…

ubuntu小技巧30--23.10桌面版安装钉钉启动报错undefined symbol: FT_Get_Color_Glyph_Layer

ubuntu小技巧30-- 23.10桌面版安装钉钉启动报错undefined symbol: FT_Get_Color_Glyph_Layer 介绍解決方法说明 介绍 近期在电脑上安装了 ubuntu 23.10桌面版本, 安装最新版钉钉后无法正常打开软件&#xff0c;报错 undefined symbol: FT_Get_Color_Glyph_Layer &#xff0c;具…

手把手带你学习 JavaScript 的 ES6 ~ ESn

文章目录 一、引言二、了解 ES6~ESn 的新特性三、掌握 ES6~ESn 的用法和实现原理四、深入挖掘和拓展《深入理解现代JavaScript》编辑推荐内容简介作者简介精彩书评目录 一、引言 JavaScript 是一种广泛使用的网络编程语言&#xff0c;它在前端开发中扮演着重要角色。随着时间的…