我可以在flexbox中拉物品吗？

Question

我需要创建一个以下结构:

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

里面有5件物品.它们都垂直对齐到中间.3个第一元件向左拉,最后2个元件向右拉.

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

我决定使用flexbox,结果更方便灵活.此外,它更具响应性.

现在我的问题是,我可以在flexbox中分发这样的元素吗？理想情况下,这5个元素中的每一个都是flexbox项目.但是我如何告诉flexbox将那些3拉向左边,将那些2拉到右边？我认为添加空元素来填充空间并不是最好的主意.

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

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

每个项目中是否包含所需的元素,或者甚至可能是单独的flexbox？

Answer 1

使用display: flex沿margin-left: auto为4 ^个子元素

<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

输出: