flex布局 使用场景：适用于移动端的布局，pc端反之，特别是ie11以前 比float（浮动）更完美，简洁高效
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
justify-content: space-around;/*子盒子在父盒子内随着浏览器窗口大小变化自动缩放*/
}
div span{
width: 150px;
height: 150px;
background-color: purple;
margin-right: 5px;
/*有几个子盒子就把父盒子等分成几份，且给每个子盒子分配同样大小，写此句后上面的宽高150就不起作用了*/
flex: 1;
}
</style>
html代码部分:
<body>
<div>
<span>1</span><span>2</span><span>3</span>
</div>
</body>
属性介绍： 单行单列布局找align-items 多行多列布局找align-content
