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.