Simple Flexbox Example

by Harsh Bhatnagar

HTML

<ul class="flex-container">
    <li class="flex-item">1</li>
    <li class="flex-item">353453453452</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4t5345345345345</li>
    <li class="flex-item">5</li>
    <li class="flex-item">65345345</li>    <li class="flex-item">4ertert</li>
    <li class="flex-item">gdfg5</li>
    <li class="flex-item">6erertert</li>    <li class="flex-item">4</li>
    <li class="flex-item">5dsdfsdf</li>
    <li class="flex-item">6</li>
</ul>

CSS

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
  
    align-items: stretch
}
.flex-item {
    background: tomato;
    padding: 5px;
    margin-top: 10px;
    color: white;


}