利用justify-content: space-between;可以让两个盒子左边一个右边一个
很方便，但是第一个盒子设置隐藏的时候，第二个盒子就会跑到第一个盒子的位置，占据了第一个盒子的位置，页面布局就乱了。
margin在flex布局中，子元素margin为auto的时候，伸缩包含块剩余的空间将会分配到flex-item的外边距margin上（百度0.0）
这时候就可以给第二个盒子设置一个margin-left：auto；第二个盒子就可以回到右边。
。
。
。
且当有三个的盒子的时候
这种方法可以完美的实现
两个盒子在左边一个盒子在右边
或是两个盒子在右边一个盒子在左边
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
display: flex;
justify-content: space-between;
}
.box div{
width: 200px;
height: 200px;
}
.box1{
background-color: pink;
}
.box2{
background-color: blue;
margin-left: auto;
}
/*.box .box1{
display: none;*/
.box3{
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>