关于弹性布局的理解

1、定义弹性盒：
display:flex;
2、flex:1;
缩放
3、flex-direction:row/column;
定义盒子内容主轴的方向 row为横向 column为纵向；
3、justify-content:flex-start/center/flex-end/space-around/space-between;
定于盒子内容在主轴方向上的排列方式

4、align-items:flex-start/center/flex-end;
定义盒子内容在侧轴上的排列方式
5、flex-wrap:nowrap/wrap/wrap-reverse;
定义盒子内容在超出时 是否转行
7、order:-1/0/1;
定义盒子内容单个选项的元素位置
8、align-self:flex-start/center/flex-end/baseline stretch;
定义盒子内容单个元素内容的侧轴排列方式
9、flex-flow:flex-direction和flex-wrap的缩写 flex-flow: row wrap;

10、align-content:flex-start/center/flex-end/space-around/space-between;stretch;
定义整体盒子在侧轴的排列方式
11、定义flex盒子后内容不再区分行级标签和块级标签都可以设置宽高。
12、在弹性布局的i标签引入背景图时：
1.当图片宽高都是一样时 测量宽高 然后进行 居中


2、当图片宽高不一样时：