Flex伸缩布局

                                                                            Flex伸缩布局

 （一）flex布局原理

Flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的活性，任何一个容器都可以指定为flex布局。

当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。通过父盒子添加flex属性，来控制子盒子 的位置和排列方式。

体验中的div就是flex父容器。

体验中的span就是子容器flex项目

子容器可以横向排列也可以纵向排列

（二）flex布局父项常见属性