一、什么是弹性盒模型
1、弹性盒模型是一种更优秀的布局方式，使用弹性布局模式可
以控制子元素排列方式，不需要通过计算控制元素间隙。2、弹性盒模型本质是通过两轴来控制的，一个是换行轴，一个
是排列方向，开启弹性模式以后称之为弹性容器，内外边距都可
以正常使用。
二、布局的默认方式
1、display:block 默认是 block-block 对外块元素对内块元素
2、display:inline 默认是 inline-inline 对外是行内元素对内行内元素
3、display:inline-block 对外是行内元素对内是行内元素
4、display:flex 默认是 display:block-flek 对外是块元素对内是弹性盒模型
5、display:inline-flek 对外是 inline 对内是弹性盒模型
三、弹性盒模型的特点
1、默认从左往右排列
2、子元素有了弹性可以自动伸缩
3、默认不换行，因为换行需要手动控制
四、语法与取值 (主轴)
1、父级定义弹性盒模型容器 display:flex; 定义排列方向
(主轴)flex-direction:row(默认从左到右) row-reverse( 从
右到左排列 ) culumn(排列从上到下) culumn-reverse( 从下到
上排列 )
五、换行方式 (交叉轴 辅轴)
1、默认是不换行，并且均分子元素宽高。2、flex-warp:warp;(正常换行 向右 向下) flex-
warp:warp-reverse(反向换行 向上 向左) 默认 nowrap 不换行。
总结:
1、不管任何时候，主轴永远垂直与交叉轴
2、flex-warp: 主轴 交叉轴;(是主轴与交叉轴的简写方式)
3、子元素不设置宽的时候由内容撑开
4、子元素不设置高的时候等比例填充
5、不设置宽高由内容撑开
六、(justify-centent) 主轴的布方案
1、just-centent:flex-start(默认 主轴的开始位置)
2、just-centent:flex-ent(主轴结束的位置)
3、just-centent:center(主轴元素居中排列)
4、just-centent:space-around(空白元素均分给子元素并且子元素空白是父元素的两倍)
5、just-centent:space-between(只有子元素有间距)
6、just-centent:space-evenly(父元素与之元素间距相等)
七、交叉轴的布局方案