这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写 XCX,英文名 mini program,是一种不需要下载安装即可使用的应用,它实现了应用 "触手可及" 的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要介绍了微信小程序 Flex 布局详解的相关资料, 需要的朋友可以参考下
微信小程序页面布局方式采用的是 Flex 布局。
flex 布局
Flex 布局的特点:
微信小程序实现了 Flex 布局, 简单介绍下 Flex 布局在微信小程序中的使用。
伸缩容器
设有 display:flex 或者 display:block 的元素就是一个 flex container(伸缩容器),里面的子元素称为 flex item(伸缩项目),flex container 中子元素都是使用 Flex 布局排版。
display:block 指定为块内容器模式,总是使用新行开始显示,微信小程序的视图容器 (view,scroll-view 和 swiper) 默认都是 dispaly:block。
display:flex: 指定为行内容器模式,在一行内显示子元素,可以使用 flex-wrap 属性指定其是否换行,flex-wrap 有三个值: nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)
使用 display:block(默认值) 的代码:
- <view class="flex-row" style="display: block;">
- <view class="flex-view-item">
- 1
- </view>
- <view class="flex-view-item">
- 2
- </view>
- <view class="flex-view-item">
- 3
- </view>
- </view>
显示效果:
block
改换成 display:flex 的显示效果:
flex
可以从效果图看到 block 和 flex 的区别,子元素 view 是在换行显示 (block) 还是行内显示(flex)。
主轴和侧轴
Flex 布局的伸缩容器可以使用任何方向进行布局。
容器默认有两个轴:主轴 (main axis) 和侧轴(cross axis)。
主轴的开始位置为主轴起点 (main start),主轴的结束位置为主轴终点 (main end), 而主轴的长度为主轴长度 (main size)。
同理侧轴的起点为侧轴起点 (cross start), 结束位置为侧轴终点 (cross end), 长度为侧轴长度 (cross size)。详情见下图:
Flex-direction
注意,主轴并不是一定是从左到右的,同理侧轴也不一定是从上到下,主轴的方向使用 flex-direction 属性控制, 它有 4 个可选值:
如果水平方向为主轴,那个垂直方向就是侧轴,反之亦然。
四种主轴方向设置的效果图:
示例图
图中的实例展示了使用了不同的 flex-direction 值排列方向的区别。
实例代码:
- <view>
- <view class="flex-row" style="display: flex;flex-direction: row;">
- <view class="flex-view-item">
- 1
- </view>
- <view class="flex-view-item">
- 2
- </view>
- <view class="flex-view-item">
- 3
- </view>
- </view>
- <view class="flex-column" style="display:flex;flex-direction: column;">
- <view class="flex-view-item">
- c1
- </view>
- <view class="flex-view-item">
- c2
- </view>
- <view class="flex-view-item">
- c3
- </view>
- </view>
- </view>
运行效果:
flex-direction
对齐方式
子元素有两种对齐方式:
justify-conent 定义子元素在主轴上面的对齐方式
align-items 定义子元素在侧轴上对齐的方式
justify-content 有 5 个可选的对齐方式:
justify-content
align-items 表示侧轴上的对齐方式:
align-tiems 设置的对齐方式,和侧轴的方向有关,下图以 flex-direction 为 row, 侧轴方向是从上到下, 描述 align-items 的 5 个值显示效果:
aign-items
有了主轴和侧轴的方向再加上设置他们的对齐方式,就可以实现大部分的页面布局了。
源代码地址: https://github.com/jjz/weixin-mina/blob/master/pages/flex/flex.wxml
来源: http://www.phperz.com/article/17/0720/331355.html