flex box


5 marzo, 2017

flex-box

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;).


Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Quiza también te interese:


17 marzo, 2017

superficie de ataque

15 febrero, 2017


10 febrero, 2017