这是最初始的样子

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Flexbox: Task 1</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
    }
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 100%;
      height: 100%;
      display: flex;
    }
    div {
      width: 200px;
      height: 200px;
    }
    .div1 {
      background-color: antiquewhite;
    }
    .div2 {
      background-color: rgb(167, 96, 8);
    }
    .div3 {
      background-color: palegreen;
    }
    .div4 {
      background-color: pink;
      margin-left: auto;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
  </div>
</body>
</html>

可以用margin属性来达成想要的布局。以下就列举几种（本人也是刚领会到margin的奥妙指出，有更好的方法请留言）

其余元素靠左，一个元素靠右

非常简单，你只需要给 粉色盒子(.div4)，margin-left: auto;
或者给 绿色盒子(.div3) 加margin-right: auto;

.div4 {
    background-color: pink;
    margin-left: auto;
}

// 或者

.div3 {
    background-color: palegreen;
    margin-right: auto;
}

是不是很神奇呢？

一个元素靠左，其余元素靠右

有没有想到该要怎么做呢？

也是非常简单的，给第一个盒子(.div1)：margin-right: auto;
或者给第二个盒子(.div2)：margin-left: auto;

.div1 {
    background-color: antiquewhite;
    margin-right: auto;
}

// 或者

.div2 {
    background-color: rgb(167, 96, 8);
    margin-left: auto;
}

一个元素靠下，其余元素靠上

给第一个盒子(.div1)：margin-top: auto;

.div1 {
   background-color: antiquewhite;
   margin-top: auto;
}

更多巧妙的技巧去探索吧~~~ 有更好的再补充，不得不说。css真的千变万化

css强大的margin属性

其余元素靠左，一个元素靠右

一个元素靠左，其余元素靠右

一个元素靠下，其余元素靠上