How can I align one item right with flexbox?

https://jsfiddle.net/vhem8scs/

Is it possible to have two items align left and one item align right with flexbox? The link shows it more clearly. The last example is what I want to achieve.

In flexbox I have one block of code. With float I have four blocks of code. That is one reason why I prefer flexbox.

HTML

<div class="wrap"><div>One</div><div>Two</div><div>Three</div></div><!-- DESIRED RESULT --><div class="result"><div>One</div><div>Two</div><div>Three</div></div>

CSS

.wrap {  display: flex;  background: #ccc;  width: 100%;  justify-content: space-between;}.result {  background: #ccc;  margin-top: 20px;}.result:after {  content: '';  display: table;  clear: both;}.result div {  float: left;}.result div:last-child {  float: right;}