Flexbox

by Anton

HTML

<div class="flexbox">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div>

CSS

.flexbox {
    height: 300px;
    display: flex;
    flex-direction: row; /* row | column | row-reverse | column-reverse */
    flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
    align-items: flex-start;
    border: solid 1px red;
}

.box {
    flex: 1;
    margin: 10px;
    padding: 10px 10px 10px 20px;
    color: white;
    font-size: 36px;
    font-weight: bold;
    background-color: grey;
}

.box:nth-child(1) {
    align-self: stretch;
}
.box:nth-child(2) {
    flex: 3;
}
.box:nth-child(4) {
    align-self: flex-end;
}