Summary of 4 methods of div+css layout to achieve 2-end alignment of css

<div class="box">
 <div class="demo">
     <div>1</div>
     <div>2</div> 
     <div>3</div>
 </div>
</div>

<style>
.box{
     width:300px;margin:auto;overflow:hidden;border:1px solid #ddd;
}
.box .demo{
    margin-left:-10px;width:310px
}
.box .demo div{
     width:93.333px;/*(calculation: (300-10*2)/3)*/
     float:left;
     margin-left:10px;
}
</style>

<style>
.demo{
     margin:0;padding:0;
     text-align:justify;
     text-align-last:justify;/*Solve IE support*/
     line-height:0;/*Solve the extra blank space at the bottom of the standard browser container*/
}
@media all and (-webkit-min-device-pixel-ratio:0) {
  .demo{
     font-size:0;/*webkit clears the extra space in the last element after using [line break] or [space character] in the element*/
  }
}
.demo:after{/*text-align-last:justify is only supported by IE, standard browsers need to use the .demo:after pseudo-class to simulate a similar effect*/
     display:inline-block;
     overflow:hidden;
     width:100%;
     height:0;
     content:'';
     vertical-align:top;/*Opera browser solves the extra space at the bottom*/
}
.demo div{
     width:20%;
     display:inline-block;
     text-align:center;/*Cancel the influence of upper elements*/
     text-align-last:center;
     font-size:12px;
}
</style>

<style>
.demo{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

.demo div{
     width:30%; 
}
</style>

<style>
.demo{
     -webkit-column-count:3;-moz-column-count:3;column-count:3;
     -webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px; 
}

.demo div{
     
}
</style>