Flexbox no3: justify content

by Richard Hunter

HTML

<div class="container">
    <div class="child top"></div>
    <div class="child"></div>
    <div class="child bottom"></div>
</div>

CSS

.container {
    display : flex;
    background : pink;
    height : 400px;
    width : 100%;
    justify-content : center;
    align-items : center;
}
.child {
    width : 100px;
    height : 50px;
    background : red;
}
.top {
    align-self : flex-end;
    background : green;
}
.bottom {
    align-self : flex-start;
    background : blue;
}