Flexbox container properties exercise

This is used as a starting template for flexbox presentation for css properties in flexbox container.

by Antonio Silva del Pozo

HTML

<div class="flex-background">
    <div class="flex-container">
      <div class="flex-item medium wide">1</div>  
      <div class="flex-item large narrow">2</div>
      <div class="flex-item small normal">3</div>  
      <div class="flex-item medium narrow">4</div>
      <div class="flex-item large normal">5</div>
      <div class="flex-item small wide">6</div>
      <div class="flex-item medium normal">7</div>
      <div class="flex-item small narrow">8</div>
      <div class="flex-item large wide">9</div>
    </div>
</div>

CSS

.flex-background {
    /* Just background styling */
    width: 70%;
    height: 90%;
    background-color: #000;
    padding: 10px;
}

.flex-container {
    /* Insert here your styles */

    
    /* General styling */
    border: solid 2px white;
    min-height: 300px;
}

.flex-item {
    
    /* General styling */
    background-color: cyan;
    width: 50px;

    text-align: center;
    line-height: 50px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: white;
    margin: 10px;
}

.large {
    height: 100px;
    line-height: 100px;
}

.medium {
    height: 75px;
    line-height: 75px;
}

.small {
    height: 50px;
    line-height: 50px;
}

.wide {
    width: 100px;
}

.normal {
    width: 75px;
}

.narrow {
    width: 50px;
}