css - 我可以在 flexbox 中拉取元素吗？

Question

我需要创建以下结构:

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

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

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

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

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

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

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

每个元素内部都包含所需的元素，或者甚至可能是单独的 flexboxes？

Answer 1

对第 4 个 子元素使用 display: flex 和 margin-left: auto

<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;
}

密码本:http://codepen.io/anon/pen/wKvMOw

---

输出: