1.flex-direction:用来规定flex项目在轴方向上面排列的顺序。

  row,从左往右排列

  row-reverse,从右往左排序

  column,从上往下排序

  column-reverse,从下往上排序

2.flex-wrap:决定项目是否多行显示的属性

  nowrap,一行显示不换行  

  wrap,多行显示  

  wrap-reverse,多行显示,但是跟规定排列方向相反

3.flex-flow:flex-direction 和 flex-wrap 的缩写

  eg:flex-flow:row wrap;

4.justify-content:用于在主轴上对齐伸缩的项目属性(横向)

  flex-start(默认值),左对齐。

  flex-end,右对齐。

  center,居中对齐。

  space-between,最左边左对齐,最右边右对齐,中间平均分配。

  space-around,平均分布在一行里,两端会保留空间。

5.align-content:纵向

  flex-start(默认值),上对齐。

  flex-end,下对齐。 

  center,居中对齐。

  space-between,上下两边对齐,中间平均分配。

  space-around,平均分布在一行里,两端会保留空间。

  baseline,第一行文字的基线对齐

  stretch,扩大占据剩下的空间

6.align-items,所有项目对齐

7.align-self,单独项目对齐

8.display: flex;弹性布局  display: inline-flex;行内元素Flex布局  display: -webkit-flex;Webkit内核的浏览器,必须加上-webkit前缀

9.order:项目的排列顺序,数值越小,排列越靠前。

10.flex-grow:项目的放大比例,默认为0

11.flex-shrink:项目的缩小比例,默认为1

12.flex-basis:项目占据的主轴空间,默认值为auto,即项目的本来大小。

13. flex:默认值为0 1 auto,该属性有两个快捷值:auto (1 1 auto)(根据剩余空间调整) 和 none (0 0 auto)(不发生变化)。

转载于:https://www.cnblogs.com/YuFly-lyx/p/9686951.html

微信小程序成长记录(一)相关推荐

  1. 微信小程序学习记录【1】【项目结构构成、官方文档构成、基本配置】

    微信小程序学习记录[1][项目结构构成.基本配置]文章目录 项目结构构成 官方文档结构 基本配置 1. 小程序配置 1.1 app.json 1.2 page(页面名).json 1.3 sitema ...

  2. 我为什么要开发微信小程序来记录成长锻炼成绩

    我家里有两个孩子,一个刚上一年级,一个幼儿园.在当前国家提倡减负的背景下,鼓励大家参加益智健身的活动,体育活动明显增加了.还有一份体育评分标准,如下<小学一年级测试项目及评分标准>: 小学 ...

  3. 微信小程序开发记录一,开发工具的使用

    工欲善其事,必先利其器. 开发工具的下载> 1.微信开发者工具的下载: 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/downl ...

  4. json 微信小程序 筛选_微信小程序学习记录

    全局配置 app.json 文件用来对微信小程序进行全局配置. pages 类型为 String Array 是 页​面路径列表,创建目录和更改时会自动更改文件. 用于指定小程序由哪些页面组成,每一项 ...

  5. 微信小程序学习记录——4.框架-视图层

    文章目录 1.WXML 数据绑定 简单绑定 运算 组合 列表渲染 wx:for block wx:for wx:key 条件渲染 wx:if block wx:if wx:if vs hidden 模 ...

  6. 微信小程序学习记录(一)

    如何定义一个全局变量: 1,在根目录下app.js中添加 App({globalData: {g_isPlayingMusic : false,g_currentMusicPostId :null,d ...

  7. 微信小程序学习记录(二)MQTT连接阿里云

    准备 微信小程序开发工具 MQTT.js库:https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js点开链接,右击页面内容另存到电脑. 开始 将MQTT.js复制到 ...

  8. 微信小程序bug记录

    1.bug--开启下拉刷新不能自动回弹 说明:微信小程序开启下拉刷新后,开发者工具上可以自动回弹,android上不能回弹,基础库2.9.4 解决:在onPullDownRefresh监听函数中动态关 ...

  9. 微信小程序开发记录1——创建小程序

    临近开学,打算做一个新生信息填报的采集程序,新生报道时可以扫码填写. 目前其实已经有很多好用的小程序可供我们选择了,但是因为我们的信息采集中涉及很多学生的个人隐私(管理工作需要,必须采集的),因此对其 ...

最新文章

  1. java 内核线程_Java:如何根据cpu内核扩展线程?
  2. 模板 - 2 - SAT问题
  3. 基于多种转换语义的图数据库查询
  4. C# 派生类的XmlSerializer序列化XML
  5. css中伪类与伪元素的区别
  6. P3242 [HNOI2015] 接水果(整体二分、扫描线、dfs序)
  7. ThinkPHP5访问去除/public/index.php
  8. python 热力图_python数据分析:数据缺失机制及利用missingno库对缺失可视化
  9. JavaScript:利用StringBuffer类提升+=拼接字符串效率
  10. 「管理数学基础」1.3 矩阵理论:特征值与特征向量
  11. 最详细的JavaScript教程(高级篇),深入学习JavaScript
  12. 天天生鲜社区团购运营平台
  13. android 动画进度控制,Android仿美团加载数据、小人奔跑进度动画对话框实现方法...
  14. 用C语言求解一元二次方程的简单方法
  15. Linux日本云服务器安全设置的基本步骤
  16. CVPR2019目标检测论文汇总
  17. 银河麒麟V10(Kylin Linux V10)安装ElasticSearch
  18. android bugly 错误分析,Android使用bugly捕捉异常
  19. csgo社区自建服务器,CSGO官方社区服黄页测试版上线
  20. Python+OpenCV对证件照换底

热门文章

  1. 差点死掉3次,被兄弟骗进传销组织,北漂反转... | 人生如戏,全靠运气!
  2. 王家林最受欢迎的一站式云计算大数据和移动互联网解决方案课程 V1(20140809)之Hadoop企业级完整训练:Rocky的16堂课(HDFSMapReduceHBaseHiveZookee
  3. COPC Inc.宣布客户服务历程咨询计划
  4. Win8消费者预览版激活码
  5. 日交易额破3000万 饿了么领跑白领市场
  6. MRP与SQL之一:库存表的设计和SQL查询
  7. 在ROS下控制dobot(magician)机械手的夹抓
  8. LLBL Gen Pro 3.X 下使用 Template 模版绑定(一)
  9. 火狐查看html文件夹,火狐浏览器如何像IE一样查看临时文件和历史记录
  10. 学习内容:求一个点到椭球面的距离(下)