学习笔记

伸缩布局

以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

使用说明

1. 指定一个父盒子为伸缩盒子，即指定：display: flex

2. 明确你需要的主侧轴方向，并设置flex-direction 默认是row ，纵向是column

3. 设置父盒子的属性来调整子元素的布局，例如align-items

4. 设置子盒子的宽高或者比例，完成具体的子元素在父盒子中的布局

各个属性介绍

1. flex-direction调整主轴方向（默认为水平方向）

2. justify-content调整主轴对齐

3. align-items调整侧轴对齐（子元素可以使用align-self覆盖）

4. flex-wrap控制是否换行

5. align-content堆栈（由flex-wrap产生的独立行）对齐

6. flex-flow是flex-direction + flex-wrap的简写形式

7. flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

8. order控制子项目的排列顺序，正序方式排序，从小到大

微信小程序语法问题

组件的使用是类似于HTML的方式（有不同），组件使用的严格的XML标准（开闭标签问题）

组件的分类

• 功能性的组件

  • 完成具体功能的

• 布局类型的组件

  • 用来完成页面结构的（DIV）

• API 类型（使用的角度）

  • wx.showModal

  • 通过调用一个方法来使用的