前言：

公司的下一个项目需要开发微信小程序，因为目前公司没有小程序开发人员，公司方面又想节约成本，所以让我一个做iOS的去学习小程序开发。个人方面呢我还是很乐意的，程序员就是要一直不断的学习，平时也会抽点时间学习一些新的知识，而这一次公司能够让我在上班的时间学习，何乐不为呢？

前面了解了浮动和定位，浮动和定位是基于盒子模型的传统布局解决方案，它在处理一些特殊布局时非常不方便，比如垂直居中，2009年W3C提出了一种新的方案–Flex布局，该布局可以简单快速地完成各种伸缩性设计。Flex是Flexible Box的缩写，即为弹性盒子布局，具有更大的灵活性；

1、基本概念

Flex项目:

Flex布局主要由容器和项目构成，采用Flex布局元素，称为Flex容器（flex container）,他的所有直接子元素自动成为容器成员，称为Flex项目（flex item）。

容器默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）

######(1)、mian start 和 main end

主轴开始的位置（主轴与边框的交叉点）称为main start;结束的位置称为 main end;main start和main end和主轴的方向有关；

######(2)、cross start 和 cross end

交叉轴的开始位置称为cross start;结束位置称为cross end;cross start 和 cross end和交叉轴的方向有关

项目默认沿主轴从主轴开始位置到主轴结束的位置进行排列，项目在主轴上占据的空间叫 main size,在交叉轴上占据的空间叫 cross size

Flex 布局模型

2、容器属性

  • display : 通过设定display属性，指定元素是否为Flex布局。
  • flex-direction : 指定主轴方向，决定项目额排列方式。
  • flex-wrap : 排列换行设置。
  • flex-flow : flex-direction 和flex-wrap的简写形式。
  • justify-content : 定义项目在主轴上的对齐方式。
  • align-items : 定义项目在交叉轴上的对齐方式。
  • align-content : 定义多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。

具体的属性取值可以访问 flex-CSS手册

1、display
display用来指定该元素是否为Flex布局，语法为：

1
2
3
4
5
6
7
.mybox {
    display: flex | inline-flex;
}
/*
flex:用于产生块级Flex布局
inline-flex:用于产生行内Flex 布局，行内容器符合行内元素特性，同时在容器内又符合Flex布局规范。
*/

2、flex-direction
flex-direction用于指定主轴的方向，即项目排列的方向，语法为：

1
2
3
4
5
6
7
8
9
.myBox {
    flex-direction: row | row-reverse | colum | colum-reverse;
}
/*
row : 主轴上的水平方向，起始在左端，默认值。
row-reverse:主轴为水平方向，起始在右端。
colum： 主轴为垂直方向，起点在上沿。
cloum-reverse: 主轴为垂直方向，起点在下沿。
*/

如图：flex-direction示例

3、flex-wrap
默认情况下，项目都排在一条线上，flex-wrap用来指定如果一条轴线排不下，该如何换行。语法为：

1
2
3
4
5
6
7
8
.myBox {
    flex-wrap : nowrap | wrap | wrap-reverse;
}
/*
  nowrap: 不换行，默认值。
  wrap: 换行，第一行在上方。
  wrap-reverse: 换行，第一行在下方。
*/

3、项目属性

  • order : 定义项目的排序顺序。
  • dlex-grow : 定义项目的放大比例。
  • flex-shrink : 定义项目的缩小比例。
  • flex-basis : 定义在分配多余空间之前，项目占据的主轴空间（main size）。
  • flex : flex-grow、flex-shrink、flex-basis的简写。
  • align-self : 用来定义单独的伸缩项目在交叉轴上的对齐方式，可覆盖默认的algin-item属性。