微信小程序-Flex布局的使用
一、基本说明:
Flex模型能够提高页面的布局效率,对于微信小程序来说,当页面需要适应不同屏幕尺寸及设备类型时,使用该模型布局可以得到事半功倍的效果。
Flex模型也称为盒子模型(FlexiableBox),就相当于一个盒子里面按分类放着很多东西,我们将这个盒子称为容器(container),容器内部的组件我们称为项目(item)。
Flex布局的坐标系是以容器左上角为原点,自原点往右、往下两条坐标轴。在默认情况下是水平布局,即水平方向从左往右为主轴,垂直方向自上而下为交叉轴;垂直布局则相反。
flex布局微信官方说明文档链接:微信官方说明文档
通过对flex布局的简单了解后,我们开始进行简单的使用
二、容器属性
首先我们定义一个宽高都为700rpx的容器,为了使效果更加直观,我们定义背景颜色为红色。
然后为容器里面添加三个宽高都为200rpx的项目,为了使效果更加直观,我们定义背景颜色为黄色。
1、flex-direction属性
用于设置主轴方向,通过设置坐标轴可以规定项目的排列方向
属性取值
- row:默认值,主轴在水平方向从左到右,项目按主轴方向从左到右排列
- row-reverse:主轴是row的反方向,项目按主轴方向从右到左排列
- column:主轴在垂直方向从上往下,项目按主轴放从上往下排列
- column-reverse:主轴是column的反方向,项目按主轴方向从下往上
当flex-direction取值为row时,效果以及代码如下图
当flex-direction取值为column时,效果以及代码如下图
注意:使用flex布局必须先声明 display:flex
2、flex-wrap属性
用于规定是否允许项目换行,以及多行排列时的换行方向
属性取值:
nowrap:默认值,表示不换行,项目过多会导致压缩
wrap:当容器单行容不下所有项目会进行换行
wrap-reverse:当容器单行容不下所有项目会进行换行,换行为wrap的反方向。
为了进行演示,我们为该容器增加多三个项目D、E、F,wxml代码如下图
当flex-wrap取值为nowrap时,效果以及代码如下图
当flex-wrap取值为wrap时,效果以及代码如下图
3、justify-content属性
该属性用于设置项目在主轴方向上的对齐方式,以及分配项目之间的多余空间。
常用属性值:
- flex-start:默认值,项目间不留空隙
- center:项目在主轴上居中排列,项目间不留空隙。
- space-around:第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间距的一半。
当flex-wrap取值为wrap的前提下,justify-content取值为space-around效果以及代码如下图
4、align-items属性
该属性用于设置项目在行中的对齐方式。
常用属性值:
- stretch:默认值,未设置项目尺寸时,将项目拉满
- flex-start:项目顶部与交叉轴起点对齐
- flex-end:项目底部与交叉轴终点对齐
- center:项目在交叉轴居中对齐
当flex-wrap取值为wrap,justify-content取值为space-around的前提下,align-items取值为center效果以及代码如下图
5、align-content属性
该属性用于多行排列时设置项目在交叉轴方向上的对齐方式,以及分配项目及其周围的多余空间。
常用属性取值:
- stretch:默认值,未设置尺寸时,将各行项目拉满
- flex-start:首行在交叉轴起点开始排列,行间不留间距。
- center:行在交叉轴中点排列,行间不留距。
- flex-end:尾行在交叉轴终点开始排列,行间不留距。
当flex-wrap取值为wrap,justify-content取值为space-around的前提下,align-content取值为center效果以及代码如下图
注意:
1、align-items和align-content本质上的区别为项目行与行间留不留间距
2、justify-content和align-content的区别为justify是定义主轴方向上的对齐方式,align是定义交叉轴方向的对齐方式。
综合案例:
- 在一容器中定义6个项目,项目设置为主轴在水平方向上从左到右排列,若当行容纳不下所有项目,则进行换行,项目水平方向的对齐方式采用space-around属性,项目在行中居中对齐。同时定义项目内元素位于项目的中心。
题目解析:
定义容器的属性:
首先容器定义flex布局 display:flex;
项目设置为主轴在水平方向上从左到右排列 flex-direction:row ;
若当行容纳不下所有项目,则进行换行 flex-wrap:wrap ;
项目水平方向的对齐方式采用space-around属性justify-content:space-around ;
项目在行中居中对齐 align-items:center ;
定义项目内元素位于项目的中心(即主轴和交叉轴均居中对齐):
项目定义flex布局 display:flex ;
主轴对齐: justify-content: center ;
交叉轴对齐: align-items: center ;
实现效果如下图:
案例完整代码:
index.wxml
<view class="container">
<view class="item">项目A</view>
<view class="item">项目B</view>
<view class="item">项目C</view>
<view class="item">项目D</view>
<view class="item">项目E</view>
<view class="item">项目F</view>
</view>
index.wxss
.container{width:700rpx;
height:750rpx;
margin: 25rpx;
background-color: red;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}.item{display: flex;
align-items: center; /*交叉轴方向居中 */
justify-content: center; /*主轴方向居中*/
border: 1rpx solid black;
width:200rpx;
height:200rpx;
background-color: yellow;
}
微信小程序-Flex布局的使用相关推荐
- image 微信小程序flex_微信小程序flex布局案例(1)
微信小程序 flex 布局案例一 前言 最近在学习微信小程序时,看到很多布局都用到了 flex 布局,其实 flex 布局学习过好多东西不用就忘记了,这次用上就只得再去看了,争取学会.下面是我做的简单 ...
- 微信小程序flex布局怎么实现上中下3行铺满整个窗口。
问题描述: 在微信小程序中使用flex实现上中下3行布局铺满整个窗口. 如图 **WXML ** <!--/* ***HotApp云笔记,基于HotApp小程序统计云后台 ***免费云后台申请地 ...
- 微信小程序——flex布局
flex布局的基本知识 flex布局作用于父容器之上,用于控制其子盒子的位置和排列的方式. flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活 ...
- 小程序flex布局不生效
20210510微信小程序flex布局不生效 原本的代码我还没看出来错在哪里了,求路过大佬指正 原本的效果: 原本的代码: wxml : <!-- 推荐内容--><scroll-vi ...
- 微信小程序flex弹性布局
微信小程序常用布局为flex.使用flex模型来提高页面布局效率,当页面需要适应不同屏幕大小以及设备类型,该模型一确保元素在恰当的位置. 属性 解释 默认值 其它值 flex-direction 排列 ...
- 7.微信小程序(布局适配与物理逻辑像素)
微信小程序(布局适配与物理逻辑像素) 前言 移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下 关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...
- 微信小程序中布局使用的css布局语法
微信小程序的布局是基于css的布局,可以参考一些学习网站上面的css的基础学习 以下是布局的一些语法规则 class 用 .class{} id 用 #id{} 类的子元素添加css (1 ...
- 微信小程序页面布局——上中下结构
小程序页面布局--上中下结构 内容简述 上中下结构:头脚固定+中间滚动框 使用UI框架:Vant Weapp(引入安装参考) 为了方便,使用了less生成wxss,所以展示的是less代码,有需要可以 ...
- “喜茶Go”店商微信小程序界面布局的架构思路(源代码讲解)
作者介绍:郝天翔,10年移动互联网软件行业经验,全栈高级软件工程师,微信生态开发先行者,主要参与智慧城市新零售电商领域方案的设计与实施,本次分享商业案例"喜茶Go",已落地于全国多 ...
最新文章
- 编译原理上机实习c语言小子集编译程序的实现报告,编译原理上机实习指导书(2015-11修改).pdf...
- 进阶必备:素数筛法(欧拉,埃氏筛法)
- 当当网新用户注册界面——界面源码
- 将datatable导出为excel的三种方式(转)
- JEECG开源团队,欢迎技术爱好者加入
- 只用两个函数实现事务的设计模式!
- 如何利用OriginPro8画图
- 资产配置神器--美林时钟帮你获取超额收益
- 耶斯莫拉~一起来学集合啊~
- 科技,美学,人性——交互设计的十字路口
- 刚挣钱的程序员同学该如何花钱?
- 关于Windows Server 2012 网络发现启动不了
- 微信公众号如何和Salesforce集成,然后后台给公众号的关注者推送模板消息?
- 广搜之原神·稻妻·荒海水位解谜中的两处机关 输入数字生成解谜步骤
- web通过Ajax连接服务器
- 为何选择阿里云——恒生银行案例
- transformer与视觉
- 郑大计算机技术专硕学费,郑州大学研究生学费标准及奖助政策情况
- 如何在Windows中启用“立体声混音”并从PC录制音频
- linux 没有nc命令,linux nc命令