Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017·  

Propiedades Flexbox

Algunos diseñadores piensan que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es, por tanto, más sencillo, y los diseños complicados pueden crearse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Otros piensan que, de momento, se debe utilizar el modelo de "bloques" para diseños complejos y el de "cajas flexibles" para diseños más livianos.

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos y ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

Cuando utilizamos la propiedad display: flex con un elemento HTML automáticamente dicho elemento se convierte en el contenedor padre (flex contaniner), y los elementos HTML que estén dentro de él se convierten en los elementos hijos (flex items). Es decir, se crea un entorno flexible.

Como decimos, los elementos flex tienen la capacidad de redimensionarse y recolocarse dentro de la caja flex con facilidad. También tienen la capacidad de alinearse tanto horizontalmente como verticalmente y todo esto puede ser muy interesante a la hora de diseñar páginas web adaptativas.

Por defecto, el eje principal (main axis) es el horizontal y el eje secundario (cross axis) es el vertical. Esto puede cambiar y ser al revés si utilizamos la propiedad flex-direction: column; de forma que, a partir de este momento, el eje principal sería el vertical y el eje secundario seria el horizontal.

Observación: la propiedad flex no se hereda en CSS3, por tanto podemos definir tantos elementos container (anidados o no) como queramos.

flex box 1

Propiedades del contenedor PADRE (flex container)

PropiedadSintaxis y valoresObservaciones
display display: flex |  inline-flex ;
.contenedor {
    display: flex;
}
Si su valor es flex o inline-flex, la propiedad display define un contenedor padre  (flex container).
flex-direction flex-direction: row | row-reverse | column | column-reverse;
.contenedor { 
    flex-direction: row; 
}

Establece la dirección del eje principal (main) y por tanto la dirección de los elementos flex.
Valor por defecto:  row (fila)

flex-wrap flex-wrap: nowrap | wrap | wrap-reverse;
.contenedor {
    flex-wrap: wrap;
}
Especifica si puede haber un cambio de línea (wrap) o no (nowrap).
Valor por defecto:  nowrap
flex-flow flex-flow: flex-direction [flex-wrap]
.contenedor { 
    flex-flow: row nowrap; 
}
Es una forma abreviada (shorthand) para las propiedades flex-direction y flex-wrap.
Valor por defecto:  row nowrap
align-items align-items: flex-start | flex-end | center | baseline | stretch;
.contenedor {
    align-items: flex-start;
}
Alinea los elementos del contenedor flex en el eje secundario (cross).
Valor por defecto:  stretch
justify-content justify-content: flex-start | flex-end | center | space-between | space-around;
.contenedor {
   justify-content:flex-start; 
}
Alinea los elementos del contenedor flex en el eje principal (main), evidentemente cuando no ocupan todo el espacio.
Valor por defecto:  flex-start
align-content align-content: flex-start | flex-end | center | space-between | space-around | stretch;
.contenedor {
    align-content: flex-start;
}
Alinea los elementos del contenedor flex cuando los elementos ocupan más de una línea y no utilizan todo el espacio disponible en el eje secundario (cross).
Valor por defecto:  stretch

 

Algunos ejemplos

Código Vista Observaciones
.container {
  display: flex;
}
.items {
/* no difinimos nada */
}
flex ej1

Como no indicamos nada más que el elemento con la clase .container es flex, el resto de las propiedades se aplican por defecto.

El eje main es el horizontal, de izquierda a derecha y el cross el vertical, de arriba hacia abajo. Como el valor por defecto de align-items es stretch los items llenan todo el espacio vertical.

.container {
  display: flex;
justify-content: center; }

flex ej2 Los items se colocan en el centro del eje principal, que en este caso es el horizontal.
.container {
  display: flex;
justify-content: flex-end; }

flex ej3 Los items se colocan al final del eje principal, que en este caso es el horizontal.
.container {
  display: flex;
justify-content: space-between; }

flex ej4 El espacio horizontal se distribuye por igual desde los extremos.
.container {
  display: flex;
justify-content: space-around; }

flex ej5 El espacio horizontal se distribuye por igual.
.container {
  display: flex;
flex-direction: row-reverse; }
flex ej10 Cambia la orientación del eje principal, pasando a ser de derecha a izquierda.
.container {
  display: flex;
align-items: center; }

flex ej6 Solo nos movemos en el eje secundario (cross) que es el vertical, para este caso.
.container {
  display: flex;
align-items: flex-start; }

flex ej7 Solo nos movemos en el eje secundario (cross) que es el vertical, para este caso.
.container {
  display: flex;
align-items: flex-end; }

flex ej8 Solo nos movemos en el eje secundario (cross) que es el vertical, para este caso.
.container {
  display: flex;
justify-content: center;
align-items: center; }

flex ej9 Al utilizar las dos propiedades a la vez conseguimos que los items queden centrados tanto horizontal como verticalmente.

 

Propiedades de los elementos HIJOS (flex items )

PropiedadSintaxis y valoresObservaciones
align-self align-self: auto | flex-start | flex-end | center | baseline | stretch;
.item {
   align-self: flex-start;
}
Reposiciona elementos individuales relativamente al eje transversal (cross). Normalmente se trata de elementos posicionados con align-items.
flex-grow flex-grow: número | initial | inherit;
.item {
    flex-grow: 2;
}
Define cuánto puede aumentar (crecer) un elemento flex, si fuera necesario.
Valor por defecto:   0
flex-shrink flex-shrink: número | initial | inherit;
.item{
    flex-shrink: 2;
}
Define cuánto puede disminuir (contraerse) un elemento flex, si fuera necesario.
Valor por defecto:   1
flex-basis flex-basis: número | auto | initial | inherit;
.item {
   flex-basis: auto;
}
Especifica el valor inicial del tamaño principal de un elemento flex.
Valor por defecto:   auto
flex flex: none | flex-grow [flex-shrink] [flex-basis];
.item {
   flex: 0 1 auto;
}
La forma abreviada para flex-growflex-shrink y flex-basis juntos.
Valor por defecto:   0 1 auto
order order: número | initial | inherit;
.item {
   order: 2;
}

Se utiliza para cambiar el orden en el que aparecen los elementos individuales.

Etiquetas: Teoría, CSS3

Imprimir

En línea...

Hay 19 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

0.png8.png4.png8.png9.png
Hoy ........16
Ayer .......9
Mes ........196

Jueves, 14 Diciembre 2017