一看就会的微信小程序flex布局,简单实用

先看一下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布局很实用方便。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值