flex boxes floating

by Jordan Dayton

HTML

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
    
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left;
    margin: 0 5px;
}