.container {
  display: flex;
  justify-content: flex-start;
}

.item1 {
  /* ... */
}

.item2 {
  /* ... */
}

.item3 {
  margin-left: auto;  /*   <--- justifies last item to flex-end  */
}

Practical example

In this example, we justify the content inside the container to flex-start.

To "override" the justify-content property we use a simple trick - set margin-left: auto; for item3 so it will be justified to flex-end.

Runnable example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <style>

      .container {
        border-radius: 10px;
        background: #3085d6;
        height: 200px;
        width: 200px;
        box-shadow: 3px 3px 20px 0px grey;
        display: flex; 				   /* <----- required              	  	      */
        justify-content: flex-start;   /* <----- justifies content to flex-start  */
      }

      .item1 {
        margin: 2px;
        border: 1px solid #6e6e6e;
        border-radius: 5px;
        background: #ffc353;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
      }

      .item2 {
        margin: 2px;
        border: 1px solid #787878;
        border-radius: 5px;
        background: #92ff53;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
      }

      .item3 {
        margin: 2px;
        border: 1px solid #575757;
        border-radius: 5px;
        background: #dd53ff;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        
        margin-left: auto;		/*  <--- "overrides" justifying to flex-start  */
      }

    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>