微信小程序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)

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/141841.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

万宾科技智能传感器EN100-C2有什么作用?

在日常生活中井盖是一种常见的城市设施,但井盖出现问题可能会对人们的生活造成什么影响呢?移位或老化的井盖可能会威胁人们的安全,同时也会影响城市生命线的正常运行。然而智能井盖的出现为解决这些问题提供了有效的应对方案。 WITBEE万宾智能…

宋浩高等数学笔记(二)导数与微分

目录 2.1导数的概念 2.2函数的求导法则 2.3高阶导数 2.4隐函数求导and参数方程求导 考研数学一大纲中对本章的要求: 1.理解导数和微分的概念,理解导数与微分的关系,理解导数的几何意义,会求平面曲线的切线方程和法线方程&#…

[工业自动化-18]:西门子S7-15xxx编程 - 软件编程 - PLC用于工业领域的嵌入式系统:硬件原理图、指令系统、系统软件架构、开发架构等

目录 前言: 一、PLC的硬件电路原理 1.1 硬件框图 1.2 硬件模块详解 (1)CPU (2)存储器 (3)输入/输出(I/O)模块 (4)编程器 (5&a…

[C++]Leetcode17电话号码的字母组合

题目描述 解题思路: 这是一个深度优先遍历的题目,涉及到多路递归,下面通过画图和解析来分析这道题。 首先说到的是映射关系,那么我们就可以通过一个字符串数组来表示映射关系(字符串下标访问对应着数字映射到对应的…

MyBatis 知识总结

1 MyBatis 1.1 简介 持久层框架,用于简化JDBC开发 JavaEE三层架构:表现层、业务层、持久层 表现层:做页面展示 业务层:做逻辑处理 持久层:负责将数据保存到数据库的那一层代码 框架:半成品软件&#xff0…

DefaultListableBeanFactory

DefaultListableBeanFactory 是一个完整的、功能成熟的 IoC 容器,如果你的需求很简单,甚至可以直接使用 DefaultListableBeanFactory,如果你的需求比较复杂,那么通过扩展 DefaultListableBeanFactory 的功能也可以达到&#xff0c…

找工作在哪个app找比较真实可靠

吉鹿力招聘网是一款找工作比较真实靠谱的app。吉鹿力招聘网是一个新兴的人脉社交招聘平台,靠谱而且需求明确,可以依靠自己或者身边朋友推荐。在吉鹿力招聘网上可以有很多前辈的职场分享和行业八卦,对于刚毕业的大学生而言,很有参考…

2024怎么自学软件测试?自动化测试?测试老鸟总结,少走弯路...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、自学软件测试怎…

【vue+baiduMap】百度地图绘制多边形区域

1、创建百度地图应用&#xff0c;获取权限ak 百度地图服务台 Ps.本项目里按钮等基础控件使用的是element-ui版本控件 2、项目内全局引入 index.html页面插入引用代码&#xff1a; <scriptsrc"//api.map.baidu.com/api?v2.0&ak你的密钥"type"text/ja…

数字化催生低代码开发浪潮,管理系统也能一键生成

近年来&#xff0c;数字经济以无比迅猛的势头崛起&#xff0c;成为引领全球经济变革的重要引擎。在这个数字化趋势日益明显的时代&#xff0c;企业的数字转型已经成为提高竞争力、适应市场需求的迫切需要。 随着科技的飞速发展&#xff0c;数字技术已经渗透到各个领域&#xff…

详细介绍‘’由于找不到msvcr110.dll 无法继续执行简单处理方法

分享关于“msvcp110.dll丢失的4个解决方案”的主题。在我们日常使用电脑的过程中&#xff0c;可能会遇到各种各样的问题&#xff0c;而msvcp110.dll丢失就是其中之一。那么&#xff0c;msvcp110.dll丢失是什么意思呢&#xff1f;又是什么原因导致了这个问题的出现呢&#xff1f…

详细记一下jvm调优整过程

cpu占用过高 cpu占用过高要分情况讨论&#xff0c;是不是业务上在搞活动&#xff0c;突然有大批的流量进来&#xff0c;而且活动结束后cpu占用率就下降了&#xff0c;如果是这种情况其实可以不用太关心&#xff0c;因为请求越多&#xff0c;需要处理的线程数越多&#xff0c;这…

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

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

【OpenCV实现图像:用OpenCV图像处理技巧之巧用直方图】

文章目录 概要前置条件统计数据分析直方图均衡化原理小结 概要 图像处理是计算机视觉领域中的重要组成部分&#xff0c;而直方图在图像处理中扮演着关键的角色。如何巧妙地运用OpenCV库中的图像处理技巧&#xff0c;特别是直方图相关的方法&#xff0c;来提高图像质量、改善细…

【云备份项目总结】客户端篇

项目总结 整体回顾util.hppdata.hppcloud.hpp 代码 客户端的代码与服务端的代码实现有很多相似之处&#xff0c;我们也只编写一个简单的客户端代码。 整体回顾 客户端要实现的功能是&#xff1a;对指定文件夹中的文件自动进行备份上传。但是并不是所有的文件每次都需要上传&am…

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

一、单选题(共25题,每题2分,共50分) 第1题 下面哪个积木能够调节左右声道的音量? A: B: C: D: 答案:C 第2题 当我们进行数学计算时,需要用到下面哪个模块中的积木? A: B:

【已解决】vscode 配置C51和MDK环境配置

使用命令 gcc -v -E -x c - 看自己gcc 有没有安装好 也可以在自己的vscode中新建一个终端 gcc -v g -v 首先把自己的C51 和MDK 路径 设置好 vscode 中设置 C51 和 MDK 的路径 这是你keil 中写 51单片机和 STM32 的 如果你出现什么include 的什么波浪线&#xff0c;那估计…

如何用python生成动态随机验证码图片

相信大部分小伙伴在登录注册页面都看到过这样的验证码图片&#xff1a; 今天就带大家用实现一波这种验证码图片的生成&#xff0c;这在Django开发中可以拿来即用~ 1. 首先导入必要的库&#xff1a; import random from PIL import Image, ImageDraw, ImageFont, ImageFilter…

编译原理-至下而上的语法分析

文章目录 至下而上分析的基本问题归约短语规范归约符号栈的使用 算符优先分析优先关系算符文法及优先关表构造如何求FIRSTVT和LASTVT算符优先分析算法优先函数 至下而上分析的基本问题 归约 用一个寄存符号的先进后出栈&#xff0c;把输入符号一个一个地移进栈里&#xff0c;…

SAP 52策略测试简介

我们在前面测试了50策略按单生产,创建完计划独立需求后,通过主数据中的独立集中的字段控制下层物料是否能通过计划订单转成生产订单和采购订单。 52策略其实和50策略非常的相似。52策略就是按库存生产,创建完计划独立需求后的结果和50策略是一样的。 1、我们先看下50策略和…