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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
来源:51CTO
作者:知止内明
链接:https://blog.51cto.com/357712148/2460583