Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。使用flex 布局，给父容器设置display: flex，然后再设置justify-content: center可以实现水平居中，设置 align-items: center可以实现垂直居中。
flex的核心的概念就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴。
一、容器和轴
二、父容器的属性
三、子容器的属性
四、我的demo
https://codepen.io/camille666/pen/VMrPaX
https://codepen.io/camille666/pen/pWdeNr
https://codepen.io/camille666/pen/jGaBoz