css3中的display:flex与perspective属性

flex是flexible Box的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性。设置为flex的布局后，子元素的float、clear、vertical-align属性将失效。

flex的基本概念

采用flex布局的元素，称为flex容器。容器默认有两根轴，水平的主轴和垂直的交叉轴。它的所有子元素自动成为容器成员，称为“flex项目”，简称“项目”。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

flex容器的6个属性：flex-direction:容器内项目的排列方向（默认横向排列）；

flex-wrap:容器内项目换行方式

flex-flow:以上两个属性的简写方式

align-items:项目在交叉轴上的对齐方式

justify-content:项目在主轴上的对齐方式

align-contene:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

perspective属性定义了观察者与z=0平面的距离，使具有三位位置变换的元素产生透视效果。Z>0的三维元素比正常大。Z<0的三维元素比正常小，大小成都取决于该属性值的大小。

可以调整镜头与平面位置：

a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。

b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。