<header>
  <h1>Come funziona <code>flex-basis</code></h1>
  </header>

  <section id="container">
    <div class="ele ele1">Elemento 1</div>
    <div class="ele ele2">Elemento 2</div>
    <div class="ele ele3">Elemento 3</div>
    <div class="ele ele4">Elemento 4</div>
  </section>

  <footer>
    <p>Codice creato da Andrea Barghigiani per <a href="https://skillsandmore.org">SkillsAndMore</a>.</p>
  </footer>

body{
  width: 80%;
  margin: 0 auto;
}

/* Elemento Contenitore */
#container{
  background-color: #ddd;
  min-height: 300px;
  display: flex;
}


/* Colori Sfondo */
.ele1{ background-color: red; }
.ele2{ background-color: yellow; }
.ele3{ background-color: green; }
.ele4{ background-color: blue; }

/* Regola FlexBox */
.ele{
  flex-basis: 20%;
}