https://www.jianshu.com/p/2839fb8484ce

微信小程序 View 支持两种布局方式：Block 和 Flex，所有 View 默认都是 block浮动布局，要使用 flex 布局的话需要显式的声明：

display:flex;
概述
1.Flex容器属性

flex-direction 决定元素的排列方向
flex-wrap 决定元素如何换行
flex-flow flex-direction和flex-wrap的简写
justify-content 元素在主轴上的对齐方式
align-items 元素在交叉轴的对齐方式
2.Flex容器内元素属性

flex-grow 当有多余空间时，元素的放大比例
flex-shrink 当空间不足时，元素的缩小比例
flex-basis 元素在主轴上占据的空间
flex 是grow、shrink 、basis的简写
order 定义元素的排列顺序
align-self 定义元素自身的对齐方式
写一个简单Demo
wxml：


1
2
3

wxss:

.main { width: 100%; background-color: antiquewhite;}
.item { height: 100rpx; width: 100rpx;}
.item1 { background-color: red;}
.item2 { background-color: dodgerblue;}
.item3 { b

作者：***不在转
链接：https://www.jianshu.com/p/2839fb8484ce
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。