Flexbox: align right several elements

Question

I have an HTML-structure:

  <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>

And styles:

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

.item {
  width: 50px;
}

I want items 1, 2 and 3 to be on the left, and items 4 and 5 on the right. I was trying to solve this problem using align-self: right:

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

But it didn't help.
Here's my fiddle. What am I doing wrong?

The `align-` properties are for aligning elements on the _cross_ axis, not the main axis. It would have an effect if you had `flex-direction: column` on the parent. // Check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/, it has a pretty comprehensive explanation ... — CBroe, Dec 06 '17 at 15:11

score 5 · Accepted Answer · answered Dec 06 '17 at 15:11

Find the first element that needs to be pushed right and apply 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: align right several elements

1 Answers1