先看一下flex介绍http://www.runoob.com/w3cnote/flex-grammar.html
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局.
效果图
这个不用浮动的,用浮动在不同大小的手机容易变形。
wxml
< view class=‘cont’>
< view class=‘cont-one’>123< /view>
< view class=‘cont-one’>456< /view>
< view class=‘cont-one’>789< /view>
< /view>
Wxss
.cont{
display: flex;
justify-content: space-between ;
}
.cont-one{
width: 100rpx;
height: 200rpx;
background-color: coral;
}
很多效果,在官方文档都有的效果图显示,就不一一列出来。上面这个是用justify-content: space-between ;做的。这个比较常用。
说说怎么用法。第一要把最外面view 设置成Flex布局。一定要加上display:flex;第二就是容器属性。
.cont{
display: flex;//把设置成flex
justify-content: space-between ;// 容器的属性
}
用法就是这么简单的,项目中用flex布局很实用方便。