Question

我有一个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我的小提琴。我做错了什么？

Answer 1

找到需要向右推的第一个元素并应用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>

Flexbox：对齐几个元素

1 个答案: