是一种很常见的布局方式，可以简单、快速、响应式的实现各种布局页面 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
。
弹性布局要在嵌套标签内使用，必须是直接父子关系 给父元素设置开启布局display-flex；子元素按照布局方向排列
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
容器内添加的属性｛ display-flex；
flex-direction：改变主轴的方向
值：row
row-reverse
column
column-reverse
justify-content：主轴的对齐方式
值：center
flex-statr
flex-end
space-between
space-around
baseline
stretch
align-items：交叉轴的对齐方式
值：center
flex-statr
flex-end
baseline
stretch
flex-wrap：wrap；换行
值：wrap
nowrap
wrap-reverse
align-content：换行后，交叉轴的对齐方式
值：center
flex-statr
flex-end
space-between
space-around
stretch
｝
项目内添加的属性｛ flex-basis： 设置主轴上，项目的伸缩基准
order：number； 设置项目的先后顺序
值：number ，值小的在前面，根据主轴方向进行排列的
align-self： 设置交叉轴上的对齐方式，会覆盖父元素的align-items的值
值：center
flex-statr
flex-end
baseline
stretch
auto
flex-grow： 布局的空间分配，设置子项目占据的比例大小
值：number 0为默认值，不放大比例不能为负数
flex-shrink： 布局的空间分配，设置子项目的收缩比例
值：number 0为不收缩 1为默认值，不能为负数
｝
