微信小程序：flex 布局

转载

知止内明 2019-12-21 14:30:32 博主文章分类：前端技术

文章标签 微信小程序：flex 布局 文章分类 XML/XSL 前端开发

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 来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。