微信小程序 :flex 布局

时间秒杀一切 提交于 2019-12-23 13:02:24

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:

<view class=“main”>
<view class="item item1">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
</view>
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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!