Flexbox float right

Use justify-content: space-between it will push elements to the sides:

.flex {
 display: flex;
 justify-content: space-between;
}

.flex-grow {
  flex-grow: 1;
}

.one {
  border: 1px solid black;
  width: 20px; height: 20px;
}

.two {
  border: 1px solid black;
  width: 20px; height: 20px;
}

.three {
  border: 1px solid black;
  width: 20px; height: 20px;
}

Growing middle element
<div class="flex">
  <div class="one"></div><div class="two flex-grow"></div><div class="three"></div>
</div>

Without growing element
<div class="flex">
  <div class="one"></div><div class="two"></div><div class="three"></div>
</div>

Without middle element
<div class="flex">
  <div class="one"></div><div class="three"></div>
</div>

Expand snippet

Refer to this amazing tutorial to easily understand how flex box behaves: https://css-tricks.com/snippets/css/a-guide-to-flexbox/