flex布局的探索

flex布局方案已经是前端技术栈家家互晓的网页布局方案，它为盒状模型提供最大的灵活性，意为“弹性布局”。有幸读了阮一峰老师的（flex布局教程-语法篇，flex布局教程-实例篇）并加以研究，受益良多，为我平时网页布局提供了极大的便利性。

flex是一维的东西，所以说它只能控制一个方向，用坐标系来表示就是X轴，Y轴中的方向只能选一个，方向对应flex布局中的flex-direction属性，其属性值就是用来控制方向的，即主轴main-axis方向，是水平方向还是垂直方向。水平方向（row）默认起点在左端，垂直方向（column）默认起点在上沿。

有了方向之后就是换行和对齐方式，flex容器属性（flex-container）的精髓就在于对齐方式，它规定flex-item（即项目）是怎么对齐的。justify-content属性定义了项目在主轴的对齐方式，align-items属性定义了项目在交叉轴（cross axis）的对齐方式。如果想要项目水平垂直居中对齐，下面是再好不过的方案。

display: flex;
justify-content: center;
align-items: center;

除了flex容器有属性之外，flex项目也是有属性的，相对于容器的属性，项目的属性更多偏向于空间的分配，比如，flex-grow定义的是项目的放大比列，定义了该属性，并且值为1的话，该项目将占据容器剩余的空间。如果空间缩小，项目比列默认是等比缩小的，你也可以设置任意一个项目的flex-shrink属性值为0，表示该保持原有比列。除此之外，flex-basis属性定义了主轴的空间分配，它可以是固定值，也可以是百分比。flex属性是前面三个属性（flex-grow，flex-shrink，flex-basis）总和，利用它可以实现网格布局和百分比布局。

flex:1; /*网格布局*/

flex: 0 0 33.3%; /*百分比布局*/

总而言之，flex布局的便利之处是人性化，效率极高的布局方案，我下一个探索的是Grid布局。
我喜欢用文字记录我学的东西。