微信小程序Flex布局用法深入浅出分析


Posted in Javascript onApril 25, 2019

本文实例讲述了微信小程序Flex布局用法。分享给大家供大家参考,具体如下:

Flex布局: Flexible Box的缩写,意为“弹性布局”,为盒模型提供巨大的灵活性

使用说明:

1. 任何容器都可以使用flex布局

.box {
  display: flex;
}

2.行内元素可以使用flex布局

.box{
  display: inline-flex;
}

3.webkit内核的浏览器,要加上-webkit前缀

.box {
  display: -webkit-flex; /* Safari */
  display: flex;
}

外层flex容器的属性:

1.flex-direction属性

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

2.flex-wrap属性

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap (默认值) :不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。

3. flex-flow属性:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4. justify-content属性:定义item在主轴上的对其方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

5. align-items属性:定义项目在交叉轴上如何对其

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

6. align-content属性:定义多跟轴线的对其方式,如果只有一根轴线则不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

项目item的属性

1. order属性:定义项目的排列顺序,数值越小越靠前,默认值为0,负数在0前面

.item {
  order: <integer>;
}

2. flex-grow属性:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

.item {
  flex-grow: <number>; /* default 0 */
}

3. flex-shrink属性:定义项目缩小比例,默认是1,即如果空间不足,该item将缩小

.item {
  flex-shrink: <number>; /* default 1 */
}

4. flex-basis属性:在分配多余空间之前,item占据的主轴空间(main size),默认值auto,即item本身大小

.item {
  flex-basis: <length> | auto; /* default auto */
}

5. flex属性:是flex-grow,flex-shrink,flex-basis的简写,默认值为0 1 auto,后面两个属性可选

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

6. align-self属性:允许单个item与其他item有不一样的对其方式,可覆盖align-items属性

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
js 自定义的联动下拉框
Feb 07 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
详解javascript数组去重问题
Nov 06 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
vue中template的三种写法示例
Oct 21 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 #Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 #Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 #Javascript
微信小程序实现的五星评价功能示例
Apr 25 #Javascript
微信小程序实现单列下拉菜单效果
Apr 25 #Javascript
Vue组件通信的几种实现方法
Apr 25 #Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 #Javascript
You might like
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
美国社交购物市场:MassGenie
2019/02/18 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
《雾凇》教学反思
2014/02/17 职场文书
大学新闻系自荐书
2014/05/31 职场文书
水利水电专业自荐信
2014/07/08 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
车辆挂靠协议书
2016/03/23 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
JAVA springCloud项目搭建流程
2022/05/11 Java/Android