flex boxes

by Don Andress

HTML

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</div>

CSS

.container {
    width: 400px;
    height: auto;
    border: 1px solid red;
    margin: 0 auto;
}

.box1 {
    width: 50px;
    height: 100px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(227, 227, 227);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box2 {
    width: 100px;
    height: 50px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(191, 239, 255);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box3 {
    width: 70px;
    height: 30px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(238, 212, 232);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box4 {
    width: 30px;
    height: 100px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(235, 252 ,212);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box5 {
    height: 70px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(255, 173, 187);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    overflow: hidden;
}