flex布局

页面布局是前端必须掌握的技术之一，更加简单页面的布局，移动端的布局flexible box布局，可以解决一些关于元素要定位到中间位置的情况。而对于传统的定位则一般用元素的display属性+positiong属性/float属性进行定位。实现的方法比较困难。
而对于文本元素的对齐方式（水平对齐方式采用text-align属性），单行文本一般采用line-height属性。
A Complete Guide to Flexbox
Flex布局入门
Flexbox布局详解
Flex 布局语法教程
flexible box布局基本概念
定义元素的display属性为flex。可以对块元素设置弹性布局（display:flex;），也可以对行内元素设置弹性布局（display:inline-flex;）。设置display属性的元素为flex container，称为父容器（flex容器）。内部的所有子元素则为flex item，称为子项目（flex项目）。

容器存在水平和垂直二维的方向。沿水平方向上主轴（main axis），水平方向上交叉轴（cross axis）。主轴的其实位置（main start），结束位置（main end）。交叉轴的起始位置（cross start），结束位置（cross end）。flex项目占据的主轴长度为main size，占据的交叉轴长度为cross size。