Flexbox Studies

by Neviton

HTML

<div class="box">
    <div class="items">0</div>
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items">5</div>
    <div class="items">6</div>
    <div class="items">7</div>
    <div class="items">8</div>
    <div class="items">9</div>
</div>

CSS

.box {
    width: 150px;
    height: 75px;
    background-color: #aaa;
    
    display: flex;
    display: -webkit-flex;
    /*-webkit-box-orient:vertical;
    -webkit-box-align:end;*/
    align-items:center;
    -webkit-align-items:center;
    
    align-content: stretch;
    -webkit-align-content: stretch;
    
    flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
}

.items {
    width: 10px;
    height: 10px;
    background-color: #faa;
    margin: 5px;
    font-size: 10px;
    text-align: center;
}