FLEX-BOX

Eje principal por defecto ——————————-> horizontal X [Los hijos se muestran en linea]

Eje secundario: vertical Y

Para elegir el eje principal de flex box

flex direction: para elegir el eje principal.

flex direction: row por defecto

flex direction: column eje principal es Y

Para que todo esté en el mismo elemento padre

flex wrap: para que los elementos hijo salten abajo cuando no tengan espacio. Por defecto es nowrap

flex-wrap:wrap;

Alinear elemento en ambos ejes

justify-content: alinear elementos para el eje principal

align-item: alinear elementos para el eje secundario

Alinear eje secundario elemento hijo de forma independiente

align-self: alinear elemento en el eje secundario de forma individual

Podemos modificar el TAMAÑO de los HIJOS:

flex-grow: para ocupar el espacio disponible del padre. Por defecto 0.

flex-shrink: elegimos que elemento hijo encoge más que el resto. Esto se hace cuando falta espacio en el elemento padre y se reducen todos por igual. Por defecto 1. Para no encoger flex-shrink=0;

flex-basis: define el tamaño inicial del hijo. Por defecto auto. Poner 0px si queremos que los elementos midan = con independencia del contenido.

Se pueden resumir estas 3 propiedades con la propiedad flex

flex: flex-grow, flex-shrink, flex-basis;

flex: 0 1 100px; [Siempre usar px/% para flex-basis por tema de navegadores].

0: todos los elementos ocupan los mismo según su contenido

1: todos se encogen igual si falta espacio

100px: todos los elementos hijos van a medir 100px

propiedad order

order:0 por defecto.

De forma adicional: al dar la propiedad margin*:auto; a los elementos hijos, cogen el espacio sobrante. [* margin-right… etc].

Propiedad display:table;

Para paliar los problemas de flexbox y su incompatibilidad con safari, hacemos uso de las propiedades de display:table;

<div class="tablagen">
  <div class="fila">
    <div class="col">1.1</div>
    <div class="col">1.2</div>
    <div class="col">1.3</div>
    <div class="col">1.4</div>
  </div>
  <div class="fila">
    <div class="col">2.1</div>
    <div class="col">2.2</div>
    <div class="col">2.3</div>
  </div>
  <div class="fila">
    <div class="col">3.1</div>
    <div class="col">3.2</div>
  </div>
</div>

.tablagen{
  display: table;
}
.fila{
  display: table-row;
}
.col{
  display: table-cell;
  padding: 12px;
  background: #ddd;
}

Propiedad vertical-align:middle;

Con vertical-align:middle; posicionamos el elemento hijo en la mitad del elemento padre. (Este comportamiento es propio cuando se usa dentro de las propiedades table;).

Te leo en los comentarios.

Juan Centeno

Psicólogo & Formador & Marketing

flex-box