Css 我可以拉flexbox中的项目吗？

我需要创建以下结构：

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

里面有5件物品。它们都与中间垂直对齐。前3个图元向左拉，后2个图元向右拉

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

我决定使用flexbox，它变得更加方便和灵活。另外，它的反应更加友好

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

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

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

---

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

使用

display:flex

以及第四个子元素的

左边距：auto

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

代码笔：

---

输出：

---

或者你可以坚持使用Flexbox布局，让flex道具发挥所有的魔力。就我个人而言，我不喜欢在flex box布局中设置边距（除了

边距：0；

），它会使布局偏离，还会生成不需要的滚动条

<div class="rowNoWrap">
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
</div>

.rowNoWrap {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    -o-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.flexyChild {
    flex: 1;
}
.flexyChild:nth-child(4) {
    flex: 5;
    text-align: right;
    padding-right: 2%;
}

[项目]
[项目]
[项目]
[项目]
[项目]
罗诺拉普先生{
显示器：flex；
显示：-webkit flex；
-webkit flex flow：行nowrap；
-moz-flex-flow：行nowrap；
-ms flex flow：行nowrap；
-o-flex-flow：世界其他地区nowrap；
flex-flow：行nowrap；
}
.flexyChild{
弹性：1；
}
.flexyChild:n个孩子（4）{
弹性：5；
文本对齐：右对齐；
右：2%；
}

为您提供以下布局：

---

我只是想添加另一种实现flexbox的方法。没有边距、填充、边框或特殊选择器。我添加了两个额外的元素，以便将主flex容器（

.main

）与两个嵌套的flex容器（

.sub.left

和

.sub.right

）分开

*，
*：之前，
*：之后{
框大小：边框框；
保证金：0；
填充：0；
边界：0；
字体：400 16px/1.45控制台；
列表样式：无；
}
身体{
颜色：白色；
背景：黑色；
}
梅因先生{
显示：-webkit flex；
显示器：flex；
-webkit flex flow：行nowrap；
flex-flow：行nowrap；
-webkit证明内容：之间的空间；
证明内容：之间的空间；
宽度：100%；
轮廓：2倍黄色虚线；
}
.节点{
外形：4倍纯红；
字体大小：.9rem；
文本对齐：居中；
宽度：20%；
}
.sub{
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
柔性流：行换行；
宽度：50%；
轮廓：3倍点石灰；
}
.左{
-webkit内容：flex start；
调整内容：灵活启动；
}
.对{
-webkit内容：flex-end；
证明内容：柔性端；
}
味精{
字体大小：.9rem；
利润率最高：5%；
}
ylw先生{
颜色：黄色；
}
格恩先生{
颜色：青柠；
}
瑞德先生{
颜色：红色；
}

[项目]
[项目]
[项目]


[项目]
[项目]

黄色=.main

绿色=.sub

红色=.node

就是这样！谢谢！：）我不喜欢这种方法。如果您将项目添加到flexbox会怎么样<代码>5不再有效。我认为有一些情况下，

flex grow

是有用的，但不是太多，当然不是这一个。不确定您要添加这些项目的确切位置，但5总是有效的，即使您将项目添加到此div。您能举个例子说明您的意思吗？我的意思是它会影响其他项目的宽度。运行代码并缩小窗口。完全浪费空间。@RoboRobok wtf你是说？它是响应性的，随着视口按预期收缩，它也会收缩。彩色线条用于演示，因此您可以看到元素的位置。我使用了类似于边框的

outline

，但它们不会影响像

borders

do这样的维度。你是一个12岁的孩子吗？这些物品应该占据他们所需要的空间，而你的解决方案则不能。屏幕宽度很小，即使这个空元素中有大量空间，项目也会开始换行。现在明白了吗？我明白这不是问题所在。>现在我的问题是，我可以像这样在flexbox中分发我的元素吗？理想情况下，这5个元素中的每一个都是flexbox项。但我如何告诉flexbox将这3个向左拉，将这2个向右拉？我认为添加空元素来填充空间不是最好的主意。

<div class="rowNoWrap">
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
  <div class="flexyChild">[  item  ]</div>
</div>

.rowNoWrap {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    -o-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.flexyChild {
    flex: 1;
}
.flexyChild:nth-child(4) {
    flex: 5;
    text-align: right;
    padding-right: 2%;
}