flexbox

by bakhshi

HTML

<div class="items-col-rev items">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

<div class="items items-row">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

CSS

.items{
    display: flex;
    border:solid 3px black;
}
.items-col-rev{
    flex-direction:column-reverse;
}

.item{
    flex:1 0 auto;
    border:solid 1px red;
    min-width: 150px;
}

.item:first-of-type{
    background-color:blue;
}

.items-row{
    flex-wrap:wrap;
}