Flex box

by Vico Bertogli III

HTML

<ul class="flex-container">
    <li class="flex-item folio">1</li>
    <li class="flex-item folio">2</li>
    <li class="flex-item folio">3</li>
    <li class="flex-item mp4">4</li>
    <li class="flex-item folio">5</li>
    <li class="flex-item folio">6</li>
</ul>

SCSS

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap:wrap;
    align-items:center;
    .flex-item {
        background: tomato;
        padding: 5px;
        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
        margin:5px 0px;
    }
}

.folio {
    width:150px;
    height:200px;
}
.mp4 {
    width:250px;
    height:150px;

}