微信小程序 View:flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex
所有 View 默认都是 block
要使用 flex 布局的话需要显式的声明:
display:flex;
下面就来介绍下微信小程序的 Flex 布局
先做一个简单的 demo
<view class="main"><view class="item item1">1</view><view class="item item2">2</view><view class="item item3">3</view></view>
加上背景色能看的更清楚些
.main {width: 100%;background-color: antiquewhite; }.item {height: 100rpx;width: 100rpx; }.item1 {background-color: red; }.item2 {background-color: dodgerblue; }.item3 {background-color: greenyellow; }
然后大概是这个样子的:
然后我们先都加上 display: flex
好使用 flex 布局,主意,貌似 view 不会自动继承,需要在每个想使用的 view 里都加上。
首先是横向布局和竖向布局,要设置属性 flex-direction ,它有4个可选值:
- row:从左到右的水平方向为主轴
- row-reverse:从右到左的水平方向为主轴
- column:从上到下的垂直方向为主轴
- column-reverse:从下到上的垂直方向为主轴
我们来看下设置 row 和 row-reverse 的区别:
row:
row-reverse:
然后我们要设置元素在横向上的布局方向,需要设置 justify-content 属性,它有5个值可选:
- flex-start:主轴起点对齐(默认值)
- flex-end:主轴结束点对齐
- center:在主轴中居中对齐
- space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等
- space-around:每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同
然后我们要设置元素在纵向上的布局方向,需要设置 align-items 属性,它有5个值可选:
- stretch 填充整个容器(默认值)
- flex-start 侧轴的起点对齐 (这里我们手动设置下子 view 的高度,来看的明显一些)
- flex-end 侧轴的终点对齐
- center 在侧轴中居中对齐
- baseline 以子元素的第一行文字对齐
子 View 还有个属性 align-self,可以覆盖父元素的 align-items 属性,它有6个值可选:auto | flex-start | flex-end | center | baseline | stretch (auto 为继承父元素 align-items 属性,其他和 align-items 一致)
比如上面最后一个 baseline 的例子,我们把 item3 设置 align-self:flex-end;
就成了这个样子:
此外还有 flex-wrap 属性,用于控制子 View 是否换行,有3个值可选:
- nowrap:不换行(默认)
- wrap:换行
- wrap-reverse:换行,第一行在最下面
还有子 View 有个 order 属性,可以控制子元素的排列顺序,默认为0。
比如还是上面那个例子,我们把 item3 设置 order:-1; 可以把 item3 排在前面
flex 常用布局就这些
写微信小程序的可以试试
最后,要是啥时候小程序能直接支持 bootstrap 就更好了…
最新评论
- 1. Re:微信小程序 View:flex 布局
- @sun8134 恩恩,也才发现,前端做的比较少,谢谢...
- --浪去郎来
- 2. Re:微信小程序 View:flex 布局
- @浪去郎来引用微信文档上没写这么多啊,lz从哪里找到这些资料的?因为网页也支持这么布局额...不过目前用的还不是太多而已......
- --sun8134
- 3. Re:微信小程序 View:flex 布局
- 微信文档上没写这么多啊,lz从哪里找到这些资料的?
- --浪去郎来
- 4. Re:[转载]《科幻世界》那些已消失的作者
- @wangjinming引用看了这么久,一个作者没记住。也就对 何夕 比较有印象......
- --sun8134
- 5. Re:[转载]《科幻世界》那些已消失的作者
- 看了这么久,一个作者没记住。
- --wangjinming
微信小程序 View:flex 布局相关推荐
- 微信小程序解决flex布局,最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题 需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐 实际效果与代码如下: wxml <view class="con- ...
- 微信小程序开发 — Flex布局
前言 微信小程序页面布局方式采用的是Flex布局. Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局. Flex布局提供了元素在容器中的对齐,方向以及顺序 ...
- 微信小程序之 flex 布局最详细讲解 !!!
小程序 flex 布局快速入门 小程序 flex 布局实现 一.view 默认布局 1.1 flex 布局原理 1.2 flex 父项常见属性 二.使用 flex 设置水平弹性布局 2.1 Flex ...
- 微信小程序之Flex布局
目录 一.Flex 基本概念 二.Flex 容器 三.Flex 容器属性 1. flex-direction 2. flex-wrap 3. flex-flow 4. justify-content ...
- 微信小程序 view样式
参考链接: (1)微信小程序View的布局 https://www.jianshu.com/p/862dfa698523 微信小程序样式众多,这里介绍最为常用的view 小程序 View 支持两种布局 ...
- image 微信小程序flex_微信小程序view标签以及display:flex的测试
一:testview.wxml,testview.js自动生成示例代码 //testview.wxml flex-direction: row 1 2 3 flex-direction: column ...
- 我在学习小程序之flex布局
我在学习小程序之flex布局 什么是flex布局呢? flex布局定义 flex布局原理 一个小案例 需求 分析 代码实现 代码部分 效果部分 总结 什么是flex布局呢? flex布局定义 flex ...
- 微信小程序 view的文本自动换行了的问题(scroll-view)/微信小程序 view换行跟不换行的解决方案
今天在写一个滚动导航栏的时候发现 view的文本自动换行了,用了display:flex;flex-warp:nowarp;也不管用, wxml: {{item}} wxss: .top{ width ...
- 微信小程序view水平垂直居中完美解决
微信小程序view水平垂直居中完美解决 .view_box{display: flex;align-items: center;justify-content: center;width: 100%; ...
最新文章
- [Swift]LeetCode513. 找树左下角的值 | Find Bottom Left Tree Value
- linux ping结果中mdev,Linux下PING中mdev含义
- 搞懂开源框架设计思想真的这么重要吗?终获offer
- 在安卓手机上下载linux系统,如何在安卓手机上运行Ubuntu系统
- Python面试题之下面代码会输出什么
- android progressbar 自定义圆形旋转图片,Android progressBar 自定义圆形旋转图片
- MVVM下listbox默认显示最后一行
- 随想录(写给自己的C++编程规范)
- python游标卡尺什么梗_Python这个缩进让我焦头烂额!最奇葩的缩进,没有之一!...
- Java大数据-Week2-Day2面向对象进阶
- sql 联合_SQL联合,SQL联合全部
- Linux shell 中的那些你值得一试的小把戏
- 网页加载出现没有合适的负载均衡器_一篇文章彻底了解清楚什么是负载均衡
- 小米路由器mini 刷潘多拉固件教程
- Excel员工考勤表模板,这三套送给您
- 几个最新免费开源的中文语音数据集
- 复合函数高阶求导公式_常用复合函数的导数公式大学微积分常用的复合函数导数,不要推理过程只要导数公式,上课的时候老师是讲了四个,...
- CSS中如何撑起内容为空的div
- 应用计算机解数学模型之我见,初中数学建模教学之我见
- ubuntu使用ntfslabel 修改磁盘分区卷标