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