Flex布局
display:flex 指定当前盒子为伸缩盒
flex-direction:column 把盒子内容垂直从上往下排列
row 把盒子内容垂直从左往右排列
flex-wrap: wrap; 如果内容放不下就会换行排列，类似浮动
justify-content: space-between; 水平对齐方式
align-items:center; 垂直对齐方式 对齐方式（顶部，底部，中间，基线对齐）
---------------------------------------------------------------------------------------------------------
flex： 是作用于子元素占据父盒子宽高的比例    
避免dispaly:flex; 和flex: 0 1 auto;写到同一个盒子身上
---------------------------------------------------------------------------------------------------------
开发的时候图片宁愿被裁切也不要被变形
image标签的
缩放  scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放  aspectFit   保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放  aspectFill  保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放  widthFix    宽度不变，高度自动变化，保持原图宽高比不变
 ---------------------------------------------------------------------------------------------------------
 
推荐链接：
阮一峰：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
菜鸟教程：http://www.runoob.com/w3cnote/flex-grammar.html 也是阮一峰写的

微信小程序--flex常用的属性的更多相关文章

  1. 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法

    微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...

  2. 【微信小程序】常用组件及自定义组件

    (一) 常用标签 组件你可以理解为传统页面开发时候的各种标签,例如 div span 等等,我这里只说一些常用的,这样就能能搭建出一个基本的页面了,但是如果想要更加美观以及拥有更好的体验,就需要 XS ...

  3. 微信小程序 input 的 type属性 text、number、idcard、digit 区别

    微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...

  4. 微信小程序 | app.json配置属性

    app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. widows: 用于设置小程序的状态栏.导航条.标题.窗口背景色. navig ...

  5. 微信小程序 input组件type属性3个值的作用

    input组件是小程序的内容输入框组件,通常是这样来使用的: <input type="text" placeholder="输入点内容吧" /> ...

  6. 微信小程序~Flex布局

    有一点需要注意的是,你的小程序要求兼容到iOS8以下版本,需要开启样式自动补全.开启样式自动补全,在“设置”—“项目设置”—勾选“上传代码时样式自动补全”.

  7. 微信小程序开发常用功能

    获取用户信息 调用 wx.getUserProfile 方法获取用户基本信息.页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 ...

  8. 【小程序开发总结】微信小程序开发常用技术方法总结

    1.获取input的值 <input bindinput="bindKeyInput" placeholder="输入同步到view中"/>   b ...

  9. 微信小程序(3)——常用的组件

    view: view是小程序中的视图容器之一,似于html中的<div>标签 <view class="section"> <view class=& ...

随机推荐

  1. python 之 字符串处理

    分割字符串 根据某个分割符分割 >>> a = '1,2,3,4' >>> a.split(',') ['] 根据多个分隔符分割 >>> line ...

  2. mybatis和java一些知识记录

    <where> <if test="userName != null and userName != ''"> and user_name like con ...

  3. C#跨域

    //在ConfigureServices中配置 #region 跨域 var urls = "*";//Configuration["AppConfig:Cores&qu ...

  4. ubuntu 安装samba共享文件夹

    安装samba sudo apt-get install samba smbclient 配置samba sudo cp /etc/samba/smb.conf /etc/samba/smb.conf ...

  5. Schedule(Hackerrank Quora Haqathon)

    题目链接 Problem Statement At Quora, we run all our unit tests across many machines in a test cluster on ...

  6. 移动端自动化测试Appium 从入门到项目实战Python版

    移动端自动化测试Appium 从入门到项目实战Python版  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课 ...

  7. 警告: [SetPropertiesRule]{Context/Loader} Setting property 'useSystemClassLoaderAsParent' to 'false' did not find a matching property.

    警告: [SetPropertiesRule]{Context/Loader} Setting property 'useSystemClassLoaderAsParent' to 'false' d ...

  8. Leetcode443.String Compression压缩字符串

    给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长度. 进阶: ...

  9. 跟我一起了解koa（四）

    我们使用第二讲中的路由页面,再结合ejs,一起了解ejs在koa中的应用 1.安装koa-views和ejs cnpm install --save koa cnpm install koa-rout ...

  10. Win7+AMD+VS2013+opencl1.x安装与测试

    参考资料:http://www.cnblogs.com/lihao602/archive/2013/05/08/3067239.html: http://blog.csdn.net/zhoubo616 ...