1、概念1、弹性箱模型语法基础概念——任何一个容器都可以指定为Flex布局：块(display )； 请注意，如果设置为“flex布局”(同时保留内嵌(inline-Flex )浏览器前缀)，将禁用子元素的浮点、清除和垂直对齐属性。
关于W3C，弹性盒的模型正式说明了这是为了实现更复杂的布局而设计的。 其本质是Box-model的扩展，Box-model定义了要素的box模型，Flexbox进一步规范了这些box模型之间的相对关系
2、Flexible boxes框以较宽的高分打出以下8点。
水平轴：主轴；
纵轴： cross axis；
垂直轴起始位置和边框交点： cross start；
纵轴结束位置与框的交点： cross end；
主轴开始位置与框的交点： main start；
的结束位置和边框交点： main end；
各个项目占主轴的空间距离： main axis；
一个项目占纵轴的空间距离： cross axis；
2、弹性框的模型属性设定1、flex-direction:主轴的方向(项目的排列方向) ) ) ) ) ) ) ) ) )。
row :默认，主轴为水平方向，起点为左端
row-reverse :主轴为水平方向，起点为右端
column :主轴为垂直方向，起点在上边
column-reverse :主轴为垂直方向，起点位于下端
2、flex-wrap :一条轴线的排列方式
nowrap :默认，不换行。
wrap :换行符，第一行在上
wrap-reversr :换行符，第一行在下面
3、浮动：规定浮动和浮动写入属性
默认值flex-flow:row，nowrap；
4、justify-content:定义了项目主轴上的定位方法
灵活开始：默认，左对齐。
flex-end :右对齐
中心：中央
space-between :两端对齐，项目间隔相等
space-around :各项两侧间隔相等。 因此，项目之间的间隔比项目和边框的间隔大两倍。
5、align-items:定义项目如何在交叉轴上对齐
flex-start :相交轴起点对齐。
flex-end :相交轴的终点对齐
center :相交轴的中点对齐。
baseline :项的第一行文本的基线对齐。
stretch :默认值。 如果项目未设置高度或设置为auto，则会布满整个容器的高度
6、对齐内容：多轴对齐方式，在一个轴上此属性无效
flex-start :与相交轴的起点对齐。
(flex-end )对齐相交轴的终点。
center :与相交轴的中点对齐。
间距- between :对齐相交轴的两端，轴之间的间隔平均分布。
space-around :各轴两侧间隔相等。 因此，轴线间间隔比轴线与框线的间隔大2倍
stretch :缺省情况下，轴线包含在整个相交轴上
3、根据flex=1的含义，所有弹性域模型对象的子元素都具有相同的长度，内部内容将被忽略