我可以在 Flexbox 中拉取项目吗？

我需要创建以下结构：

|                                         |
| [item][item][item]          [item][item]|
|                                         |

里面有5件物品。它们都垂直对齐到中间。第 3 个元素被拉到左边，最后 2 个元素被拉到右边。

我知道我可以使用浮动，但它有几个缺点，包括麻烦的垂直对齐。

我决定使用flexbox，事实证明它更加方便和灵活。另外，它的响应更加友好。

现在我的问题是，我可以在 Flexbox 中像这样分配我的元素吗？理想情况下，这 5 个元素中的每一个都是 Flexbox 项目。但是我怎样才能告诉flexbox将这3个拉到左边，那2个拉到右边呢？我认为添加空元素来填充空间并不是最好的主意。

这是可行的还是我需要这样做？

|                                         |
| [      item      ]          [   item   ]|
|                                         |

每个项目将在其中包含所需的元素，或者甚至可能是单独的弹性盒？

Use display: flex along with margin-left: auto for the 4^th child element

<main>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
</main>

Css

main {
  display: flex; 
}

div {
   width: 12%;
   margin: 0 10px;
   border: 1px red solid;
}

div:nth-child(4) {
  margin-left: auto;
}

Codepen: http://codepen.io/anon/pen/wKvMOw

Output: