Css 如何将一个项目与flexbox对齐？

是否可以让两个项目与flexbox左对齐，一个项目与flexbox右对齐？链接更清楚地显示了这一点。最后一个例子是我想要实现的目标

在flexbox中，我有一个代码块。对于float，我有四块代码。这就是我喜欢flexbox的原因之一

HTML

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

---

要将一个flex子项向右对齐，请将其设置为

marginleft:auto

从：

主轴中自动边距的一个用途是分离弹性项目
分成不同的“组”。下面的示例显示了如何使用此
复制一个通用的UI模式-一个带有一些
左对齐，右对齐


.wrap{
显示器：flex；
背景：#ccc；
宽度：100%；
证明内容：之间的空间；
}
.wrap div:最后一个孩子{
左边距：自动；
}
.结果{
背景：#ccc；
边缘顶部：20px；
}
.结果：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
.成绩科{
浮动：左；
}
.result div：最后一个孩子{
浮动：对；
}

一个
两个
三
一个
两个
三
对于简洁、纯粹的flexbox选项，将左对齐的项目和右对齐的项目分组：

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

这样，您可以将多个项目分组到右侧（或仅一个）

将中心的某些元素（headerElement）与右侧的最后一个元素（headerEnd）对齐

谢谢在我读这篇文章之前，我尝试了另一种有效的方法。它是在应该推动另一个元素的元素上设置flex-grow:1。它也起了作用。你知道哪一个更好，为什么吗？答案很好。所以边距不占用额外的空间，而flex:1占用了额外的空间。酷@JensTörnell，自动

页边距使用容器中的空白来分隔flex项目。

flex grow

/

flex

属性获取该空空间，将其提供给flex项，该项按该数量展开。正如Danield提到的，后一种方法会使flex item 2变大，这可能是您不想要的。并非所有英雄都戴斗篷。@user1063287要将多个元素向右对齐，只需在需要向右对齐的第一个元素上应用边距left:auto。假设您希望最后4个元素向右对齐，您可以这样做：

div:nth last child（4）{margin left:auto}

这是可行的，但是如果您不将每个组中的元素更改为

display:inline或
显示：内联块，然后它们被堆叠起来，而不是像flexbox那样全部排成一行，否则会有它们。@TheDIMMReaper我不确定我是否看到了问题。你能扩展吗？我只是指你如何将标签从
div
s立即包装到
One
和
Two
到
span
s，如果它们仍然是
display:block然后它们将流向不同的行。由于OP最初有
div
s，我只想指出，如果不更改原始标记的显示，简单地将它们放在另一个
div
中是行不通的。是的，由于元素现在处于较低的级别，
display:flex
不再影响它们的布局。如果您想使用div，是的，
inline
或
inline block
可以工作。而且，很明显，
flex
，因为我们已经将其用于父div的默认
flex-direction:row
。谢谢，我试过对齐self:flex-end，但为什么它不工作？
.wrap div:last-child {
  margin-left: auto;
}

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}