弹性盒模型
经常适用于手机端图标布局
display: flex;让这个盒子显示成弹性盒（很适合移动端布局）
影响：1.让里面的子元素默认横向排列
2.如果子元素是行内元素，则直接变成块元素
3.只有一个元素，margin: auto;自动居中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 500px;height: 500px;border: 3px solid black;margin: 100px auto;display: flex;/* 让这个盒子显示成弹性盒（很适合移动端布局） 1.让里面的子元素默认横向排列2.如果子元素是行内元素，则直接变成块元素3.只有一个元素，margin: auto;自动居中*/}.box span{height: 100px;width: 100px;border: 2px dashed red;margin: auto;}</style>
</head>
<body><div class="box"><span>11111</span><!-- <span>22222</span><div>33333</div><div>44444</div> --></div>
</body>
</html> 
