创建一个大盒子里面包含四个小盒子用于演示。

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

设置样式：

.box{
      width: 800px;
      height: 200px;
      margin: 100px auto;
      background-color: bisque;
    }

    .box div{
      width: 150px;
      color: aliceblue;
    }

    .box div:nth-child(even){
      background-color: brown;
    }

    .box div:nth-child(odd){
      background-color: blue;
    }

效果：

给box设置flex布局

.box{
      display: flex;
    }

flex-start

开启flex布局后默认的对齐方式。

.box{
      justify-content: flex-start;
    }

flex-end

右对齐方式。

.box{
      justify-content: flex-end;
    }

space-around

散列环绕方式。

.box{
      justify-content: space-around;
    }

space-between

左右两端对齐方式。

.box{
      justify-content: space-between;
    }

space-evenly

均匀对齐方式。

.box{
      justify-content: space-evenly;
    }