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

  <section id="container">
    <div class="ele ele1"><p>0 1 200px</p></div>
    <div class="ele ele2"><p>0 2 200px</p></div>
    <div class="ele ele3"><p>0 1 200px</p></div>
    <div class="ele ele4"><p>0 1 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;
  margin: 0 auto;
  width: 600px;
}


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

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

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

/* Regole FlexBox Specifiche */
.ele1{ flex-shrink: 1; }
.ele2{ flex-shrink: 2; }
.ele3{ flex-shrink: 1; }
.ele4{ flex-shrink: 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.