Flex布局3D样式

Flex布局3D样式

开发工具与关键技术：前端

作者：盘子

撰写时间：2019年2月14日

3D空间并不仅是简简单单的立体图形，它更能给人带来不同的视觉冲击。相比实体，在一定条件上3D空间还可以透视。下面是个简单的可透视的3D样式，源代码见截图如下：

在此我们可以看到源代码部分很简短，仅用一个大的盒子包裹着几个小盒子，并给它们命不同的类名，再到CSS样式部分给它们设置相关样式。而这个3D样式由flex弹性布局以及transform中的相关属性共同完成，如下图展示的是部分CSS样式代码，见截图：

Flex布局有六大容器属性:flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content，它们是可选的，不同的属性作用效果不同。应用其两个属性即align-items属性和justify-content属性完成中心点的定位，如效果图中的黑色小圆点.
align-items属性定义项目在交叉轴上如何对齐，其可取值有五个：flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐，center：交叉轴的中点对齐，baseline：第一行文字的基线对齐，stretch（默认值）
justify-content属性定义了项目在主轴上的对齐，五个可选值：flex-start：（默认值）左对齐，
flex-end：右对齐，center：居中，space-between：两端对齐，space-around：每个项目两侧的间隔相等
如图中划线的语句每个数值都不一样，它们是一个由大到小或者说是由小到大的数值排列，不同的数值就代表不同