flex布局失效的场景和子元素失效的属性,常见flex的应用场景

• 父元素是flex布局，子元素的float、clear和vertical-align属性将会失效;

• 默认情况下，width,height会继承父元素的，但是flex布局下width,height可能会失效，因为flex默认有缩放功能，flex-shrink:1;flex-grow:1;所有为了不受其影响，width和height要设置，同时如果不想缩放可设置flex-shrink:0;flex-grow:0;

• 左右布局，一个div是固定宽度，想让另一个div使用flex:1,宽度是剩余空间，又不能溢出，使用flex-grow:0;不能铺满，可以使用min-width:0;或width:0; 这是flex溢出问题

• flex布局在垂直居中里，元素超过容器大小后，不能通过滚动条滚动到顶端，子元素设置flex-shrink:0;

应用场景

• 使用display:flex等分间距排列，子元素等距离排列
  父元素，使用 justify-content: space-between;
  同时前后加上伪类

:before {
    content: "";
    display: block;
}
:after {
    content: "";
    display: block;
}