CSS3 Flexbox Sample1-5

by FiNGAHOLiC

HTML

<div class="mod-items">
    <div class="mod-item">
        <img src="http://placehold.it/200x100" class="mod-item-img">
        <p class="mod-item-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="mod-item">
        <img src="http://placehold.it/200x100" class="mod-item-img">
        <p class="mod-item-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="mod-item">
        <img src="http://placehold.it/200x100" class="mod-item-img">
        <p class="mod-item-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="mod-item">
        <img src="http://placehold.it/200x100" class="mod-item-img">
        <p class="mod-item-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="mod-item">
        <img src="http://placehold.it/200x100" class="mod-item-img">
        <p class="mod-item-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="mod-item">
        <img src="http://placehold.it/200x100" class="mod-item-img">
        <p class="mod-item-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="mod-item">
        <img src="http://placehold.it/200x100" class="mod-item-img">
        <p class="mod-item-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text...

CSS

* {
    margin: 0;
    padding: 0;
}

.mod-items {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    margin: 0 auto;
    width: 500px;
}

.mod-item {
    box-sizing: border-box;
    padding: 0 5px;
    width: 100px;
}

.mod-item-img {
    display: block;
    height: auto;
    vertical-align: top;
    width: 100%;
}

.mod-item-p {
    font-size: 10px;
    line-height: 14px;
    margin: 10px 0;
}

@media only screen and (max-width: 499px) {
    .mod-item {
        width: 50%;
    }
}

@media only screen and (max-width: 320px) {
    .mod-item {
        width: 100%;
    }
}