Por diseño flexible o fluído (flexbox) se entiende la característica que tiene el layout de una página web de adaptar su contenido de acuerdo al tamaño de la pantalla del dispositivo desde el que está siendo accedida, es una de las bases primordiales del Diseño Web Responsivo (RWD por sus siglas en Inglés), y como tal es un estándar de CSS soportado por los navegadores web modernos.

Si bien el diseño de una página web usando este enfoque puede ser todo lo complejo que se quiera, para entender los conceptos solo requerimos de dos elementos básico, el Contenedor, y los Item

Contenedor:

Como su nombre lo indica es el elemento HTML que contiene o agrupa otros elementos en su interior.

En diseño fluído un contenedor flexible es la caja generada por un elemento con la propiedad "display" en "flex" o "inline-flex". Sus descendientes son llamados ítems flexibles (flex items) y están distribuidos usando el modelo de diseño flexible.

La propiedad CSS para declarar una clase de contenedor flexible sería así:
.container { display: flex;}
.container { display:inline-flex }

Item:

Cada uno de los elementos contenidos dentro de un "Contenedor".

Cada uno de estos elementos tiene unas propiedades que afectan la forma en que se distribuyen, las cuales vamos a ver mas adelante.


Propiedades del contenedor

Dirección: propiedad 'flex-direction'

Especifica la dirección en la cual los ítem serán distribuidos dentro del contenedor.

  • row: los elementos son distribuidos en el orden en que son incluidos dentro del contenedor dispuestos en fila.
  • row-reverse: Los elementos se distribuyen en orden inverso al que fueron incluídos dentro del contenedor, es decir, el primero se visualiza de último y el último de primero.
  • column: Igual a row pero distribuidos de arriba a abajo (En columna)
  • column-reverse: de abajo hacía arriba
 

Envolver: propiedad 'flex-wrap'

Por defecto los items tratarán de acomodarse en una sóla línea; esta propiedad controla la disposición de los items para distribuirse en varias líneas cuando el espacio horizontal no sea suficiente.

  • nowrap: Indica que los item se deben mostrar en una única línea
  • wrap: Indica que el contenedor tiene varias líneas, y los elementos se pueden acomodar apilándose cuando no tengan suficiente espacio horizontal
  • wrap-reverse: Igual a wrap, pero acomodando los item de manera inversa.
Ejemplo de la propiedad

 

Atajo flex-flow

flex-flow: <flex-direction>> || <flex-wrap>>;

Es la forma corta de indicar las propiedades flex-direction y flex-wrap, por ejemplo

div { flex-flow: row; } div { flex-flow: column wrap; }


Propiedades de los items.

Orden de los Ítem: propiedad 'order'

 

Los ítems por defecto están distribuídos en el mismo orden en que aparecen en el código fuente del documento, pero con esta propiedad se puede cambiar su orden.

Esta propiedad controla el orden en el que cada ítem se debe mostrar dentro del contenedor, los valores válidos son números enteros, y se despliegan empezando con el de menor valor. Los items que tengan el mismo valor se mostrarán en el orden en que aparecan en el documento.

 Crecimiento: propiedad 'flex-grow'

Indica el "factor de crecimiento" del item, mediante un número entero. El factor de crecimiento consiste en la habilidad que tiene un ítem para crecer si es necesario. Esta propiedad recibe un número entero que sirve como proporción para indicar la cantidad de espacio disponible dentro del contenedor que un ítem puede ocupar con respecto a los demás. Si se omite el valor para todos los ítems se asigna en 1, indicando que todos deben crecer a la misma proporción.

Ejemplo

Encogimiento: propiedad 'flex-shrink'

Indica el factor de ncogimiento de los ítems, es decir que tanto se puede encoger un ítem con respecto a los demás cuando el tamaño del contenedor disminuye. Si se omite el valor asignado es de 1 para todos los ítems, lo que indica que todos se encogerán en la misma proporción.

Ejemplo

Base: propiedad 'flex-basis'

Define el tamaño por defecto de un elemento ántes de que el espacio disponible se distribuya de acuerdo a los factores de encgimiento o crecimiento. Esta propiedad recibe los mismos valores que la propiedad 'width', y si se omite toma un valor de '0%'. Si se asigna 'auto' se asigna el tamaño del ítem de acuerdo a su contenido.

Ejemplo

Atajo flex

.item{ flex: none | [ <'flex-grow'>> <'flex-shrink'>>? || <'flex-basis'>> ] }

Es la forma corta de especificar el crecimiento, encogimiento y base de un ítem, el segundo y tercer valor son opcionales.


Alineación:

Una vez que el contenido de un contenedor flexible es ajustado según las dimensiones indicadas, se puede ajustar su alineación, para esto se puede usar la propiedad 'margin' siguiendo el modelo estándar Box model, si embargo en el diseño flexible se tienen nuevas opciones, las cuales vamos a ver a continuación:

Alineación horizontal: propiedad 'justify-content'

.container{ justify-content: flex-start | flex-end | center | space-between | space-around }

Esta propiedad alinea los items de manera horizontal del contenedor. Ayudando a distribuir el espacio extra cuando todos los items de una línea sean inflexibles, o cuando son flexibles, pero han alcanzado su maximo tamaño. También ayuda a controlar la alineación cuando los items se trasnlapan con la fila.

  • flex-start (Valor por defecto): Los ítems se agrupan al inicio de la fila:
  • flex-end: Los ítems se agrupan al final de la fila.
  • center: Se agrupan al centro de la fila, con la misma cantidad de espacio entre los ítems y los extremos.
  • space-between: Son distribuídos igualmente en la fila. El primer ítem empieza en la línea inicial del contenedor, y el último finaliza en el otro extremo del contenedor. Si queda espacio libre o solo hay un iem en la linea, este valor es identico a 'flex-start' y los demás ítems son distribuidos de manera que el espacio vacío entre ellos sea el mismo.
  • space-around: Los ítems sin igualmente distribuídos en la fila, con  el mismo espacio vacío entre ellos así como con los extremos del contenedor. Si no queda espacio en los extremos, o sólo hay un ítem, este valor es igual a 'center'
justify-content

Alineación de ítems: propiedad 'align-items'
.container{ align-items: flex-start | flex-end | center | baseline | stretch }

Esta propiedad controla la forma en la que los ítems se alinean similar a 'justify-content' pero en la dirección perpendicular (normalmente en el eje y).

  • flex-start: El límite del ítem se ubica en el límite inicial del contenedor
  • flex-end: El limite final del ítem se ubica al final del límite final del contenedor.
  • center: Los ítems son centrados verticalmente
  • baseline: ítems son alineados de acuerdo a su línea base del texto.
  • stretch (valor por defecto): Extiende el tamaño del ítem para que llene todo el espacio del contenedor. (Sigue teniendo en cuenta las propiedades min-width/max-width si se especificaron)
cosa
align-items

Alneación de contenido: propiedad 'align-content' .container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

  • flex-start: Las filas se  alinean al inicio del contenedor.
  • flex-end: Las filas se alinean al fin del contenedor.
  • center: Las filas se alinean en el centro del contenedor.
  • space-between: Las lineas se distribuyen de manera uniforme. La primera fila se ubica al inicio del contenedor, mientras que la última al final.
  • space-around: Las filas se distribuyen de manera uniforme, con igual espacio entre ellas.
  • stretch (default): Las filas se estiran para ocupar todo el espacio restante.
Ejemplo

Nota: Esta propiedad no tiene ningún efecto cuando solo hay una fila. por ejemplo cuando se tiene la siguiente regla CSS flex-wrap:nowrap


Alinación individual: propiedad 'align-self' .item{ align-self: auto | flex-start | flex-end | center | baseline | stretch; } Permite especificar la alineación de un item de manera individual, sobreescribiendo la alineación especificada por el contenedor en caso de existir.


Ejemplo en vivo

Referencias:


1,740 0 0