html - Flexbox:右对齐几个元素

<分区>

我有一个 HTML 结构:

  <div class="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item item--right">4</div>
    <div class="item item--right">5</div>
  </div>

和样式:

.parent {
  display: flex;
  flex-wrap: no-wrap;
  align-content: flex-start;
}

.item {
  width: 50px;
}

我希望元素 1、2 和 3 位于左侧，元素 4 和 5 位于右侧。我试图使用 align-self: right 解决这个问题:

.item--right {
  align-self: right;
}

但这并没有帮助。
Here's我的 fiddle 我做错了什么？

最佳答案

找到第一个需要向右推的元素并应用margin-left:auto

.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.item {
  width: 50px;
}

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

<div class="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item item--right">4</div>
  <div class="item item--right">5</div>
</div>

关于html - Flexbox:右对齐几个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47677394/

上一篇：html - 带有边框半径的css输入 Angular 三 Angular 形标签

下一篇：javascript - DataTables 搜索按钮单击而不是输入输入

相关文章：

html - HTML 标签 "div"的缩写是什么？

python - 获取 HTML 的最终结果文本

css - 无法使媒体查询工作

html - Flex 增长直到溢出滚动，侧边栏中的页脚组件父高度为 100%

css - 可以显示: flex; be broken?

html - CSS font-family 不同顺序

javascript - JS 错误 - 脚本无响应

HTML5 - 在页面中央放置一个宽横幅设计，具有不同的渐变颜色

css - POP UP 窗口从顶部来？

html - Flexbox - 4 Column Grid 最后一项拉伸(stretch)