Flexbox Article 1

by rosshj

HTML

<div class="flex-container">
    <div class="flex-item flex-item-1">flex item 1</div>
    <div class="flex-item flex-item-2">flex item 2</div>
    <div class="flex-item flex-item-3">flex item 2</div>
    <div class="flex-item flex-item-4">flex item 2</div>
</div>

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 240px;
    background-color: lightgrey;
}
.flex-item {
    width: 150px;
}
.flex-item-1 {
    height: 100px;
    background: red;
}
.flex-item-2 {
    height: 150px;
    background: blue;
}
.flex-item-3 {
    height: 75px;
    background: green;
}
.flex-item-4 {
    height: 35px;
    background: grey;
}