微信小程序（Flex布局-容器属性）、微信小程序（Flex布局-项目属性）、静态补充CSS-BFC讲解、静态补充CSS之IFC、FFC、GFC讲解、微信小程序（JS逻辑文件）

【前言】2019.11.22
【内容】

盒模型分类：IE盒模型，标准盒模型
微信小程序 View视图标签支持两种布局方式：Block 和 Flex

注意：
所有 View 默认都是 block浮动布局，所以如果要使用 flex 布局的话需要进行显式声明

简称：
日常开发中，采用flex布局的元素，一般简称为“容器”
容器内的元素简称为“项目”或者“元素”

布局属性：
容器属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
元素/项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

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

flex不单是一个属性，还包含了一套新的属性集
属性集包括设置容器和项目两部分

容器属性
①弹性盒模型display:flex;
②元素的排列方向flex-direction:row（默认值） | row-reverse | column |column-reverse
③元素是否换行flex-wrap:nowrap（默认值） | wrap | wrap-reverse

容器属性
④项目元素在主轴上的对齐方式justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
⑤元素在交叉轴的对齐方式align-items:stretch（默认值） | center | flex-end | baseline | flex-start
⑥多行元素在交叉轴的对齐方式align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly

项目元素属性
①多余空间时元素放大比例flex-grow：0（默认值） |
②空间不足时元素缩小比例flex-shrink:1（默认值） |
③元素在主轴上占据空间flex-basis:auto（默认值） |
④flex 是grow、shrink 、basis的简写
⑤元素的排列顺序order:0（默认值） |
⑥单独对某个元素设置交叉轴对齐方式align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch

flex-direction 属性
作用：设置项目排列方向
值：
①row（默认值）：主轴横向，项目沿主轴排列，从左到右排列

flex-direction 属性
值：
②row-reverse：row的反方向，从右到左排列
flex-direction 属性
值：
③column：主轴纵向，项目沿主轴排列，从上到下排列

flex-direction 属性
值：
④column-reverse：column的反方向，从下到上排列

flex-wrap 属性
作用：设置是否允许项目多行排列，以及多行排列时换行的方向
值：
①nowrap（默认值）：不换行。如果单行内容过多，则溢出容器
②wrap：容器单行容不下所有项目时，换行排列。
③wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。

项目属性集合
order、flex-grow、flex-shrink、flex-basis、flex、align-self

项目属性：
①沿主轴方向上的排列顺序order: 0（默认值） |
②项目的收缩因子flex-shrink: 1（默认值） |
③项目的扩张因子flex-grow: 0（默认值） |
④项目width属性替代品flex-basis: auto（默认值） | px
⑤flex-grow、flex-shrink、flex-basis的简写方式：flex 属性
⑥项目在行中交叉轴方向上的对齐方式align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch

flex-shrink属性案例：
一个宽度为400px的容器，里面的三个项目width分别为120px，150px，180px。分别对这项目1和项目2设置flex-shrink值为2和3。

flex-shrink属性案例：
①item1的最终宽度为：120 - 50 * 120 * 2 / 870 ≈ 106px
②item2的最终宽度为：150 - 50 * 150 * 3 / 870 ≈ 124px
③item3的最终宽度为：180 - 50 * 180 * 1 / 870 ≈ 169px

flex-shrink属性案例：
总权重为：120 * 0.1 + 150 * 0.2 + 180 * 0.3 = 96。参与计算的溢出空间不再是50px，而是50 * (0.1 + 0.2 + 0.3) / 1 =30：
①item1的最终宽度为：120 - 30 * 120 * 0.1 / 96 ≈ 116px
②item2的最终宽度为：150 - 30 * 150 * 0.2 / 96 ≈ 140px
③item3的最终宽度为：180 - 30 * 180 * 0.3 / 96 ≈ 163px

扩张因子flex-grow: 0（默认值） |
分析：
项目1：扩张因子为0默认值，则不会索取父级多余空间
项目2：扩张因子为1，会索取剩余空间，最终大小为
自身宽度（50px）+获取的剩余空间宽度250*(1/(1+2))=133.33px
项目3：扩张因子为2，会索取剩余空间，最终大小为
自身宽度（50px）+获取的剩余空间宽度250*(2/(1+2))=216.67px

flex-basis属性
当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替width属性。
当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，flex-basis优先级高于height，就是此时flex-basis代替height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。
扫一扫API案例：
例如餐厅点餐的小程序，我们给餐厅中每个餐桌编号1-100号，把这个数字编码到二维码中，扫码获得编号之后，就可以知道是哪一桌点的菜，大大提高点餐体验和效率。
在线二维码：草料二维码https://cli.im

在大部分开发者看来，ECMAScript和JavaScript表达的是同一种含义，但是严格的说，两者的意义是不同的。
ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。

简介：
ECMAScript(简称ES)是一个语言标准，javascript则是基于这个标准实现的脚本语言。

发展历史：
①命名：
javascript于1996年发布了第一版，当时的名字其实不叫javascipt，而是叫livescript，不过发布之后一直不温不火，正好这个时候sun公司推出来了一个面向对象的语言—Java，Java拥有很好的跨平台特性，所以很快得到了市场的认可。
②改名：
为了蹭Java的热度，livescript的母公司Netscape网景公司，就将livescript改为javascript，事实证明，这次名字改的非常明智。

、
③三足鼎立：
javascript的火爆引起了微软公司的注意，他们很快也推出了Jscript脚本语言，以此来抗衡Netscape公司，并且当时还有一门浏览器脚本语言，叫ScriptEase，这样市场上就有了三种脚本语言，并且各个语言各有特色，互不兼容。
④制定规范
1997年，Netscape给欧洲计算机制造商协会(European Computer Manufacturers Association，简称ECMA)提交了一个草案，要求根据javascript来制定一个浏览器脚本语言标准。

④制定规范：
ECMA邀请了Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成了一个技术委员会—第 39 技术委员会(TC39)，共同商讨制定了一个脚本语言的规范：ECMAScript。各个脚本语言必须按照规范来实现和约束自己的功能。
当然这个规范也是不断发展的，第一版规范叫做：ECMA-262，现在则以es+年份来命名，基本每年发一次新规范。
由此，JavaScript 的正式名称是 ECMAScript 。

⑤近期发布
2011年6月发布ECMAscript 5版本
2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。所以ECMAScript 2015简称ES6。ES5和ES6
⑥分析：
关于Netscape为什么要提交草案建立标准，有一种说法是为了提高javascript的权威性，和行业影响力
JS是 ECMAScript 一种实现后，即ES是一个语言标准，JS则是基于这个标准实现的脚本语言。
理解这个关系可以帮助开发者理解小程序中的 JS同浏览器中的JS以及 NodeJS 中的JS是不相同的。

ECMA-262 规定了 ECMAScript 语言的几个重要组成部分：
语法、类型、语句、关键字、操作符、对象