两端对齐布局

项目中有用到于两端对齐的情况，此时使用flex布局中的justify-content:space-between属性即可使盒子两端分散布局。
两个盒子分散到两端：
代码如下：

/*html代码*/
<div class="flex-space-between">
    <div class="flex-box2">1</div>
    <div class="flex-box2">2</div>
</div>
/*css代码*/
.flex-space-between{
   display:flex;
   justify-content:space-between;
}
.flex-box-width-diff{
   margin: 10px 20px;
   height: 50px;
   width: 300px;
   background-color: red;
   font-size: 15px;
   color: #ffffff;
   text-align: center;
}
.flex-box2{
   margin: 10px 20px;/*控制与两端间距*/
   height: 50px;
   width: 35px;
   background-color: red;
   font-size: 15px;
   color: #ffffff;
   text-align: center;
}

除此外，还可以实现多个盒子两端对齐，如下图：

html代码如下,css代码如上：

<div class="flex-space-between">
   	<div class="flex-box2">1</div>
    <div class="flex-box-width-diff">2</div>
    <div class="flex-box2">3</div>
</div>

此外，flex属性还可用于多种布局，基本可实现大多数业务前端布局场景；详见https://blog.csdn.net/m0_46309087/article/details/106416147。