Flexbox - align-self: flex-end horizontally

How to align div.c to the right end with flexbox like below?

+--------------+ |A B C | +--------------+

The rule align-self: flex-end; seems to align the box to the bottom even though flex-direction: row;

+--------------+ |A B | | C | +--------------+

CSS:

.container { border: 2px solid; height: 500px; display: flex; flex-direction: row;
}
.box { border: 1px solid; height: 200px; width: 50px;
}
.a { background-color: red; align-self: flex-start;
}
.b { background-color: cyan; align-self: flex-start
}
.c { background-color: green; align-self: flex-end;
} 

HTML:

<div> <div> </div> <div> </div> <div> </div>
</div>

See the fiddle here:

3 Answers

align-self: flex-end; only goes "column", in your case you have two options:

1. justify-content: space-between; on .container, fiddle

2. remove the align-self on both elements and use margin-left: auto; on .b, fiddle

.container { border: 2px solid; height: 500px; display: flex; flex-direction: row; justify-content: space-between;
}
.box { border: 1px solid; height: 200px; width: 50px;
}
.a { background-color: red;
}
.b { background-color: cyan;
}

.container { border: 2px solid; height: 500px; display: flex; flex-direction: row;
}
.box { border: 1px solid; height: 200px; width: 50px;
}
.a { background-color: red;
}
.b { background-color: cyan; margin-left: auto;
}

EDIT
now that you edited your question to be 3 boxes you can have a look at this fiddle,

.a { background-color: red;
}
.b { background-color: cyan;
}
.c { background-color: deepskyblue; margin-left: auto;
}

Updated answer

As per new question, align a single item to the right by adding margin-left: auto; to that item.

Demo

Original answer Use the justify-content property on your container.

.container { -webkit-justify-content: space-between; justify-content: space-between;
}

A good resource for flex properties here.

Fiddle

.container { border: 2px solid; height: 500px; display: flex; flex-direction: row; -webkit-justify-content: space-between; justify-content: space-between;
}
.box { border: 1px solid; height: 200px; width: 50px;
}
.a { background-color: red; align-self: flex-start;
}
.b { background-color: cyan; align-self: flex-end;
}

<div> <div> </div> <div> </div>
</div>

If you have flex-direction:'row' and want to make an item horizontally at the end, just use margin-left:'auto' it will work accordingly.