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 class="container">
<div class="box a">
</div>
<div class="box b">
</div>
<div class="box c">
</div>
</div>
See the fiddle here:
3 Answers
align-self: flex-end; only goes "column", in your case you have two options:
justify-content: space-between;on.container, fiddleremove the
align-selfon both elements and usemargin-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.
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.
.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 class="container">
<div class="box a">
</div>
<div class="box b">
</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.
