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

news2024/11/16 13:35:16

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.coloradmin.cn/o/1205715.html

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

相关文章

postgreSQL中的高速缓存

1. 高速缓存简介 ​如下图所示,当一个postgreSQL进程读取一个元组时,需要获取表的基本信息(例如:表的oid、索引信息和统计信息等)及元组的模式信息,这些信息被分别记录在多个系统表中。通常一个表的模式信…

2019年12月 Scratch(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

一、单选题(共25题,每题2分,共50分) 第1题 下列关于舞台的描述,不正确的是? A:Scratch只能设置一个舞台 B:舞台不能进行编程 C:舞台可以有多个背景 D:舞台上可以有角色 答案:B A选项,scratch只有一个舞台,B选项,可以在舞台区进行编程,例如切换背景,设置背景…

[pytorch]设备选择以及卷积神经网络的应用

0.写在前面: 首先这篇文章还没写完,因为今天要尝试对我之前的一个框架做一个简单的更新迭代,所以目前先更新这么多. 1.关于设备的选择 首先,目前的大多数电脑都是自带一些GPU(图形计算单元,在这里被称之为cuda), 需要安装相关的驱动才能正常使用这些设备和调用他们的具体情况…

在Vue.js中,什么是Vuex?它的作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

Model Inspector—软件模型静态规范检查工具

产品概述 Model Inspector(MI)原厂商是韩国Suresoft,是KOLAS国际公认测评机构,旨在提升安全关键领域软件可信度。MI用于开发过程中模型的静态检查,包括规范检查、复杂度度量,提供MAAB、HIS、CG、MISRA_AC_…

C++模拟实现——AVL树

AVL树 1.介绍 AVL树是对搜索二叉树的改进,通过特定的方法使得每个节点的左右子树高度差绝对值不超过1,使得避免出现歪脖子的情况,最核心的实现在于插入值部分是如何去实现平衡调整的,由于前面详细实现和解析过搜索二叉树&#x…

算法笔记-贪心1

算法笔记-贪心 什么是贪心算法分配饼干例题理解二分割字符串最优装箱整数配对最大组合整数分配区间问题买股票的最佳时机区间选点 问题什么是贪心算法 分配饼干例题 //贪心算法 //保证局部最优,从而使最后得到的结果是全局最优的 #include<iostream> #include<a…

No199.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

Android framework添加自定义的Product项目,lunch目标项目

文章目录 Android framework添加自定义的Product项目1.什么是Product&#xff1f;2.定义自己的Product玩一玩 Android framework添加自定义的Product项目 1.什么是Product&#xff1f; 源码目录下输入lunch命令之后&#xff0c;简单理解下面这些列表就是product。用于把系统编…

Transformers 中原生支持的量化方案概述

本文旨在对 transformers 支持的各种量化方案及其优缺点作一个清晰的概述&#xff0c;以助于读者进行方案选择。 目前&#xff0c;量化模型有两个主要的用途: 在较小的设备上进行大模型推理对量化模型进行适配器微调 到目前为止&#xff0c;transformers 已经集成并 原生 支持了…

阿里云添加端口

目录 阿里云添加端口的方法与步骤详解 一、登录阿里云控制台 二、创建安全组 三、添加入站规则 四、添加出站规则 五、完成添加端口操作 也可 1&#xff1a;搜索轻量级服务器 2&#xff1a;点击服务器 3&#xff1a;点击添加规则 4&#xff1a;保存即可 总结 阿里云…

Redis 常用的类型和 API

前言 在当今的软件开发中&#xff0c;数据存储与操作是至关重要的一部分。为了满足日益增长的数据需求和对性能的追求&#xff0c;出现了许多不同类型的数据库。其中&#xff0c;Redis 作为一种基于内存且高性能的键值存储数据库&#xff0c;因其快速的读取速度、丰富的数据结…

Flink SQL --命令行的使用(02)

1、窗口函数&#xff1a; 1、创建表&#xff1a; -- 创建kafka 表 CREATE TABLE bid (bidtime TIMESTAMP(3),price DECIMAL(10, 2) ,item STRING,WATERMARK FOR bidtime AS bidtime ) WITH (connector kafka,topic bid, -- 数据的topicproperties.bootstrap.servers m…

Javaweb之javascript事件的详细解析

1.6 JavaScript事件 1.6.1 事件介绍 如下图所示的百度注册页面&#xff0c;当我们用户输入完内容&#xff0c;百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢&#xff1f;这就需要用到JavaScript中的事件了。 什么是事件呢&…

拆位线段树 E. XOR on Segment

Problem - E - Codeforces 区间求和&#xff0c;区间异或的操作跟线段树的区间求和、区间相见相似&#xff0c;考虑用线段树。 发现数组初始值最多是1e6&#xff0c;有不到25位&#xff0c;可以知道异或最大值是这些位数全是1的情况。 发现可以对每一位进行运算就和。 我们开…

图论14-最短路径-Dijkstra算法+Bellman-Ford算法+Floyed算法

文章目录 0 代码仓库1 Dijkstra算法2 Dijkstra算法的实现2.1 设置距离数组2.2 找到当前路径的最小值 curdis&#xff0c;及对应的该顶点cur2.3 更新权重2.4 其他接口2.4.1 判断某个顶点的连通性2.4.2 求源点s到某个顶点的最短路径 3使用优先队列优化-Dijkstra算法3.1 设计内部类…

通过Python设置及读取PDF属性,轻松管理PDF文档

PDF文档属性是嵌入在PDF文档中的一些与文档有关的信息&#xff0c;如作者、制作软件、标题、主题等。PDF属性分为默认属性和自定义属性两种&#xff0c;其中默认属性是一些固定的文档信息&#xff0c;部分信息自动生成&#xff08;如文件大小、页数、页面大小等信息&#xff09…

Linux上C++通过LDAP协议使用kerberos认证AES加密连接到AD服务器

一.前言 记录自己在实现这个流程遇到的各种问题&#xff0c;因为我也是看了许多优质的文章以及组内大佬的帮助下才弄成的&#xff0c;这里推荐一个大佬的文章&#xff0c;写的非常优秀&#xff0c;比我这篇文章写得好得很多&#xff0c;最后我也是看这个大佬的代码最终才实现的…

数据运营基础:用户场景营销

一、概述 场景营销模型是顶层模型&#xff0c;是站在用户经营和用户场景角度来制定经营策略的模型。本质上&#xff0c;场景营销模型是在用户使用产品的每个细分场景中通过分析用户需求整合功能、实体和体验等为用户提供服务的模型。 二、场景的起源和特点 数据运营体系在发展…

【C++】日期类实现,与日期计算相关OJ题

文章目录 日期类的设计日期计算相关OJ题HJ73 计算日期到天数转换KY111 日期差值KY222 打印日期KY258 日期累加 在软件开发中&#xff0c;处理日期是一项常见的任务。为了方便地操作日期&#xff0c;我们可以使用C编程语言来创建一个简单的日期类。在本文中&#xff0c;我们将介…