display:inline-flex使用

1. 凡是使用了display:inline-flex布局的容器（不管是行内元素还是块级元素），将会变为弹性容器，它的宽高都将可以被设置，并且该容器整体对外表现为一个行内块元素。
   span也可以设置宽高，并且div和span它们都没有独占一行，并且它们之间还有空隙，和行内块元素相似
   

提出问题：假设span中有内容时候，而div中没有内容的时候，我们看到span元素它会掉下去，导致它没有和div对齐

处理问题：这个可以给外面套一个inline-flex的容器，并且设置垂直居中，底部的空隙可以通过vertical-align:bottom解决。（当然更简单的方式，不套外层的inline-flex容器，直接在.box中使用vertical-align:top也可以解决这个对齐的问题，但是假设这里的span和div大小是不一样的，那么它们在同一行中并不能垂直居中对齐，而且垂直居中也是比较麻烦的-或者说把2个都设置为vertical-align:middle也可以垂直居中,而如果使用margin-top则两个都会一起向下移动达不到效果。然而使用display:inline-flex比较好解决这个问题，不管它们两个是不是一样大小，都能比较简单的垂直居中对齐，这样就可以解决行内元素和图片行内块元素之间的垂直居中对齐问题了，并且发现作为inline-flex布局容器的子元素都是行内块元素，但是它们之间是没有间隙的）

2. 使用了inline-flex布局的容器，它的直接子元素将也会变成行内块元素，可以直接设置宽高（注意哦，虽然类似于行内块元素，但是它们中间是没有间隙的！）
   

3. 当使用inline-flex的父容器没有设置宽度时，当使用flex-wrap:nowrap;（默认值），当父容器宽度不够时，仍然不会换行。当使用flex-wrap:wrap时，当父容器宽度不够时，会换行。
   

4. 当使用inline-flex的父容器有设置宽度时，而flex-wrap:nowrap时，子元素宽度将会被压缩，可以通过flex-shrink设置压缩系数。（flex-grow与flex布局相同，不作演示）
   

5. 文本和行内块元素对齐，只需要添加display: inline-flex; align-items: center;
   
   即使当容器的宽度不够，导致文本换行了，这个换行的多行文本仍然维持垂直居中
   

6. 处理图片和文本垂直居中问题
   

7.在常规流中，给行内元素设置margin-bottom、margin-top、padding-top、padding-bottom，是无效的，但是如果设置给inline-flex的元素，则是可以的