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

  <section id="container">
    <div class="ele ele1"><p>1 0 200px</p></div>
    <div class="ele ele2"><p>2 0 200px</p></div>
    <div class="ele ele3"><p>1 0 200px</p></div>
    <div class="ele ele4"><p>1 0 200px</p></div>
  </section>

  <footer>
    <p>Codice creato da Andrea Barghigiani per <a href="http://skillsandmore.org">skillsAndMore</a>.</p>
  </footer>
body{
  width: 80%;
  margin: 0 auto;
}

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

.ele:not(.ele2){ color: #fff; }
.ele{ 
  display:flex;
  align-items:center;
  justify-content:center;
  
  font-size: 20px;
  font-weight: bold;
  text-align: center; 
}

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

/* Regola FlexBox */
.ele{ flex-basis: 200px; }

/* Regole FlexBox Specifiche */
.ele1{ flex-grow: 1; }
.ele2{ flex-grow: 2; }
.ele3{ flex-grow: 1; }
.ele4{ flex-grow: 1; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.