微信小程序 display: flex 与inline-flex的区别以及应用
讲到这个得从wxss的鼻祖css说起了。
一般会将html元素分为两种，即块级元素和行内元素。
一.块级元素:block element
每个块级元素默认占一行高度，一行内添加一个块级元素后一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；
说白了就是：就是一个四方块，可以放在页面上任何地方；好像一个段落，如果不另加定义的话，它将独立一行出现，且可以设置宽，高和外边距。
二.行内元素：inline element
也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。
说白了就是：在一行内的元素，只能放在行内；就好像一个单词。
display: flex ：
display:flex;不会让容器本身取消它的块装的属性，但它的子元素flex-item会取消块状的的属性。
把最外层的view属性设定为flex，由于不会让容器本身取消它的块装的属性，所以还是块属性，像一个段落一样，占据整个屏幕的一行。（这里的例子举得不太好，应该换个块装元素来举例）
再来看看它的子元素image，是行内元素，好像一个"单词"。
display: inline-flex：
外面的view设置成display: inline-flex。
可以看见成自适应的了。
有时候开发中遇见要根据项目情况来选择，因为选择自适应某些情况下会做出较大的改动。
顺便补充一下：很多情况下使用flex布局出现的问题，都是没有设置高度宽度导致的。尽量把宽度设定成100%;width:100%
微信小程序 display: flex 与inline-flex的区别以及应用相关推荐
- 微信小程序和H5网页之间有什么区别？
微信小程序和H5网页之间有什么区别 本博主语录:小程序和H5网页的主要开发语言都是 JavaScript ,所以通常小程序的开发会被用来同普通的网页开发来做对比.两者有很大的相似性,对于前端开发者而言 ...
- [转]微信小程序和H5微网站有什么区别？
时常有用户咨询:微信小程序和H5微网站有什么区别?哪个更好?这个问题,对于普通用户确实难以区分,今天我们就一起来对比一下两者的区别. 要对比,首先我们要知道,什么是微信小程序?微信官方定义:微信小程序 ...
- 微信小程序最常用的布局——Flex布局
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: colum ...
- 微信小程序（safair浏览器）flex布局中的坑
今天在用微信小程序做flex布局的时候遇到了一些问题. 布局简单来说是这样的,最外层是一个flex布局属性为flex-direction:column的元素.里面有未设置height,并且flex-g ...
- 微信小程序开发和APP开发有哪些区别
在移动互联网大火的时代,APP和微信小程序已经成为了企业从移动端获取用户流量,实现盈利的重要端口.因为微信小程序体积小,操作方便,省去了下载安装这一操作,导致这两年微信小程序的势头是越来越猛,甚至有说 ...
- 微信小程序开发和网页Web开发的区别
小程序和web开发的区别主要在前端.小程序的主要操作平台在微信上.微信服务器的前端代码和从用户数据库后台传过来的数据,通过微信内置的解释器进行拼接,解释为我们平时看到的页面.Web 开发仍然具有相同的 ...
- 钉钉微信小程序reLaunch和navigateTo，navigateTo的区别
wx.navigateTo 用于保留当前页面.跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面.对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转 ...
- 【微信小程序】wx:if与hidden的区别
wx:if 与 hidden 都用来控制小程序元素的显示 wx:if 1.条件为 true 时显示 2.当元素显示时渲染 3.元素变为不显示时销毁元素 hidden 1.条件为 false 时显示 2 ...
- 微信小程序语言与web开发语言的区别
WXML与HTML的区别 def:WXML是小程序框架设计的一套标签语言,用来构建小程序页面的结构,作用类似于web开发中的HTML 区别: 标签名称的不同 如HTML中的div,span,img,a ...
- 【微信小程序】java中类和对象的区别
目录 Kafka的基本介绍 Kafka的设计原理分析 Kafka数据传输的事务特点 Kafka消息存储格式 副本(replication)策略 Kafka消息分组,消息消费原理 Kafak顺序写入与数 ...
最新文章
- python汽车票票系统_长途客运售票系统
- PySide2 基础入门-创建实例窗口（详细解释）
- 设计模式学习笔记十：单例模式（Singleton Pattern）
- 26.27.28.29.极区图（南丁格尔玫瑰图）、维恩图 （Venn diagram）、面状图（Area chart）、树地图
- firefox 开发sdk
- socket php验证客户端验证,用Socket发送电子邮件(利用需要验证的SMTP服务器)_php基础...
- pythonkeras数据增强_Keras数据增强参数
- 一文学会，胶位偏移、缺胶、断胶、溢胶检测
- 设计模式之观察者模式demo
- 分布式队列编程优化篇
- 闲鱼账号被封怎么办？解封看这里！
- pagePiling.js - 创建美丽的全屏滚动效果
- vue-router各个属性的作用及用法
- 后台解析数据--form表单get、post方法的使用（如何上传图片到服务器）
- 指纹识别算法MZFinger5.0
- 对视频马赛克的调研学习报告
- 爷青回|用Python重构【超级马里奥】制作过程+解析|快收藏起来跟小伙伴一起拯救公主吧~
- Python入门到放弃
- MySQL查询结果中Duration Time和Fetch Time的含义
- 儿童护眼灯有必要买吗？推荐教育部入围护眼照明品牌