CSS reutilizable para componer grillas con Flexbox

css-reutilizable-para-componer-grillas-con-flexbox.markdown

CSS reutilizable para componer grillas con Flexbox

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.

index.html

<section class="contenedor">
  <div class="bloque bloque-izquierda">
    <div class="numero">56</div>
    <div class="descripcion-numero">clases</div>
  </div>
  <div class="bloque bloque-centro">
    cursadas en
  </div>
  <div class="bloque bloque-derecha">
    <div class="numero">6</div>
    <div class="descripcion-numero">meses</div>
  </div>
</section>

<section class="contenedor">
  <div class="bloque">Hoy puede ser</div>
  <div class="bloque">un gran día</div>
  <div class="bloque">Hoy puede ser</div>
  <div class="bloque">un gran día</div>
  <div class="bloque">Hoy puede ser</div>
  <div class="bloque">un gran día</div>
</section>

style.css

* { box-sizing: border-box; }

.contenedor {
  display: flex;
  align-items: center;
}

.bloque {
  flex: 1;
  padding: 10px;
}

.descripcion-numero {
  font-size: 1rem;
}

.bloque-centro {
  text-align: center;
  background: none;
  margin: 0;
  max-width: none;
  font-size: 2rem;
}
.numero { font-size: 4rem; }

.bloque-izquierda { text-align: left; }
.bloque-derecha { text-align: right; }

.bloque-izquierda, .bloque-derecha {
  max-width: 100px;
}