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 |
+--------------+
.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;
}
<div class="container">
<div class="box a">
</div>
<div class="box b">
</div>
<div class="box c">
</div>
</div>
See the fiddle here: https://jsfiddle.net/rootnode/m5hyxLhb/7/
align-self: flex-end;
only goes "column", in your case you have two options:
justify-content: space-between;
on .container
, fiddle
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;
}