Flex center vertically and to right horizontally

Question

I would like to achieve this: .right must be aligned vertically to center, but must be placed at the very end of the .wrap just like below.

Here is my code:

.wrap {
  display: flex;
  box-shadow: 0 0 0 1px black;
  height: 400px;
  align-items: center;
}
.wrap > * {
  box-shadow: 0 0 0 1px black;
  padding: 20px;
}
.right {
  align-self: flex-end;
}

<div class="wrap">
  <div class="left">1</div>
  <div class="nextToLeft">2</div>
  <div class="right">3</div>
</div>

Codepen

score 2 · Answer 1 · answered Jun 04 '17 at 11:43

2

Just add margin-left:auto;

.right {
  margin-left:auto;
}

answered Jun 04 '17 at 11:43

Ashot Khanamiryan

1,102
12
19

score 1 · Answer 2 · answered Jun 04 '17 at 11:50

<html>
<head>

<style>

.wrap {
display: flex;
box-shadow: 0 0 0 1px black;
height: 400px;
align-items: center;
justify-content: space-between;
}

.wrap > * {
box-shadow: 0 0 0 1px black;
padding: 20px;
}

.nextToLeft {
margin-right: auto;
}

</style>
</head>

<body>
<div class="wrap">
<div class="left">1</div>
<div class="nextToLeft">2</div>
<div class="right">3</div>
</div>
</body>

</html>

Flex center vertically and to right horizontally

2 Answers2