微信小程序开发:学习笔记[4]——样式布局

Flex布局

新的布局方式

  在小程序开发中,我们需要考虑各种尺寸终端设备上的适配。在传统网页开发,我们用的是盒模型,通过display:inline | block | inline-block、 position、float来实现布局,缺乏灵活性且有些适配效果难以实现。比如像下面这种常见的信息列表,要求内容高度不确定下保持垂直居中:

  

  这种情况下,我们更建议用flex布局。

  在开始介绍flex之前,为了表述方便,我们约定以下术语:采用flex布局的元素,简称为“容器”,在代码示例中以container表示容器的类名容器内的元素简称为“项目”,在代码示例中以item表示项目的类名

基本概念

  flex的概念最早是在2009年被提出,目的是提供一种更灵活的布局模型,使容器能通过改变里面项目的高宽、顺序,来对可用空间实现最佳的填充,方便适配不同大小的内容区域

  

设置容器的属性有:

1.flex-direction:row(默认值) | row-reverse | column |column-reverse     属性决定主轴的方向(即项目的排列方向)

2.flex-wrap:nowrap(默认值[不换行]) | wrap[换行] | wrap-reverse  默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

(1)nowrap(默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

3.justify-content:flex-start(默认值) | flex-end | center |space-between | space-around | space-evenly 定义了项目在主轴上的排列方式

4.align-items:stretch(默认值) | center  | flex-end | baseline | flex-start 定义项目在交叉轴上的排列方式

5.align-content:stretch(默认值) | flex-start | center |flex-end | space-between | space-around | space-evenly  定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

设置项目的属性有:

1.order:0(默认值) | <integer> 定义项目的排列顺序,数组越小,越靠前,默认为0;

2.flex-shrink:1(默认值) | <number> 定义项目的缩小比列,默认为1,即如果该空间不足,项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效

3.flex-grow:0(默认值) | <number> 定义项目的放大比例,默认为0.即存在剩余空间,也不放大。

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.flex-basis:auto(默认值) | <length>
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

5.flex:none | auto | @flex-grow @flex-shrink @flex-basis  是flex-grow,flex-shrink,flex-basis的简写方式。值设置为none,等价于00 auto。值设置为auto,等价于1 1 auto。

6.align-self:auto(默认值) | flex-start | flex-end |center | baseline| stretch
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

微信小程序开发:学习笔记[4]——样式布局的更多相关文章

  1. 第1-5章 慕课网微信小程序开发学习笔记

    第1章 前言:不同的时代,不同的Web --微信小程序商城构建全栈应用 http://note.youdao.com/noteshare?id=a0e9b058853dbccf886c1a890594 ...

  2. 第6章 AOP与全局异常处理6.5-6.11 慕课网微信小程序开发学习笔记

    https://coding.imooc.com/learn/list/97.html 目录: 第6章 AOP与全局异常处理6-1 正确理解异常处理流程 13:236-2 固有的处理异常的思维模式与流 ...

  3. 第6章 AOP与全局异常处理6.1-6.4 慕课网微信小程序开发学习笔记

    第6章 AOP与全局异常处理 https://coding.imooc.com/learn/list/97.html 目录: 第6章 AOP与全局异常处理6-1 正确理解异常处理流程 13:236-2 ...

  4. 第7章 数据库访问与ORM 慕课网微信小程序开发学习笔记

    第7章 数据库访问与ORM https://coding.imooc.com/learn/list/97.html 目录: 7-1 数据库操作三种方式之原生SQL 19:09 7-2 从一个错误了解E ...

  5. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  6. 微信小程序开发学习(一):开发前准备

    开发前准备 Step1:注册 微信小程序开放平台: https://mp.weixin.qq.com/cgi-bin/wx 开发者注册: https://mp.weixin.qq.com/wxopen ...

  7. 微信小程序视频学习笔记

    [清华大学]学做小程序 https://www.bilibili.com/video/av21987398 2.2创建项目和文件结构 小程序包含一个描述整体程序的app和多个描述各自页面的page 配 ...

  8. 微信小程序开发学习记录

    两天撸了一遍小程序的文档,跟网页相似,个人感觉是简化版.但是因为开放了很多微信自带的接口又使得部分功能开发起来相对方便 思维导图如下: 目前我的理解大概是这么个逻辑,以后深入学习后可能会有更改 跟着大 ...

  9. 微信小程序开发学习(二)

    一些官方API 总结了一些官方API,便于之后有用时针对性查找(发现官方给了好多好用的API)官方API文档 基础 wx.canIUse:判断小程序的API,回调,参数,组件等是否在当前版本可用,返回 ...

  10. 微信小程序开发学习(一)

    一.各种JSON配置 1.小程序配置app.json 为小程序全局配置,包括所有页面路径.界面表现.网络超时时间.底部tab等,类比APP开发中manifest配置. 2.工具配置project.co ...

随机推荐

  1. 如何限制Dedecms文章或产品描述的字数

    在Dedecms系统中,文章摘要(可以通过infolen或description相关标签调用)被设置了字数上限为250字符,设置上限的主要目的是减少数据库的冗余,保证网站良好的性能.因此,如果对简介内 ...

  2. SSO单点登录系列2:cas客户端和cas服务端交互原理动画图解,cas协议终极分析

    落雨 cas 单点登录 一.用户第一次访问web1应用. ps:上图少画了一条线,那一条线,应该再返回来一条,然后再到server端,画少了一步...谢谢提醒.而且,重定向肯定是从浏览器过去的.我写的 ...

  3. Android5 Zygote 与 SystemServer 启动流程分析

    Android5 Zygote 与 SystemServer 启动流程分析 Android5 Zygote 与 SystemServer 启动流程分析 前言 zygote 进程 解析 zygoterc ...

  4. mongodb副本集的基础概念和各种机制

         从一开始我们就在讲如何使用一台服务器.一个mongod服务器进程,如果只用做学习和开发,这是可以的,但如果在生产环境中,这是很危险的,如果服务器崩溃了怎么办?数据库至少要一段时间不可用,如果 ...

  5. 使用Hadoop自己的类操作HDFS

    package hdfs; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.I ...

  6. code::blocks(版本号10.05) 配置opencv2.4.3

    (1)首先下载opencv2.4.3, 解压缩到D:下: (2)配置code::blocks, 详细操作例如以下: 第一步, 配置compiler, 操作步骤为Settings  -> Comp ...

  7. 19:ReverseNumber数字颠倒

    题目描述 描述:输入一个整数,将这个整数以字符串的形式逆序输出 程序不考虑负数的情况,若数字含有0,则逆序形式也含有0,如输入为100,则输出为001 输入描述:输入一个int整数 输出描述:将这个整 ...

  8. Android - 单例模式(singleton)的使用

    单例模式(singleton)的使用 本文地址:http://blog.csdn.net/caroline_wendy 单例(singleton)是特殊的Java类,在创建实例时.一个类仅同意创建一个 ...

  9. wifi认证Portal开发系列(三):portal协议

    中国移动WLAN业务PORTAL协议规范介绍 一.用户上线认证流程 上线流程完成用户账号的认证,并把认证结果通知Portal Server,Portal server将会通知WLAN用户并且显示相应的 ...

  10. 本地filezilla&amp;servervsftp搭配使用

    环境:本地ubuntu系统&serverubuntu系统 本地安装filezilla  apt-get install filezilla '安装filezilla filezilla '执行 ...