CSS: Cajas flexibles (flexbox)

Existen dos tipos de contenedores flexibles: de bloque y en-línea.

La propiedad display permite definir el tipo de contenedor flexible:
flex: el contenedor se comporta como un bloque, es decir, ocupa todo el espacio
horizontal disponible.
inline-flex: el contenedor se comporta como un elemento en-línea (ocupa sólo el
espacio horizontal necesario y pueden colocarse unos detrás de otros en la misma línea)
Flexbox viene de “Flexible Box Layout“, que se puede traducir como “Diseño de caja
flexible“, y nos aporta una magnifica solución para todos nuestros desarrollos
“responsive”. Lo que nos permite es crear un conjunto de elementos flexibles que se
adaptan automáticamente a su contenedor y con el que podemos controlar parámetros
tales como la alineación, dirección (horizontal/vertical), ajuste de la fila según tamaños
y multitud de posibilidades que vamos a presentar en este artículo.

Contenedor: Es el elemento padre que tendrá en su interior cada uno de los ítems
flexibles.
Eje principal: Los contenedores flexibles tendrán una orientación principal
específica. Por defecto, el eje principal del contenedor flex es en horizontal (en fila).
Eje secundario: De la misma forma, los contenedores flexibles tendrán una
orientación secundaria, perpendicular a la principal. Si la principal es en horizontal,
la secundaria será en vertical (y viceversa).
Ítem: Cada uno de los hijos que tendrá el contenedor en su interior.
Display:inline-flex; Display: flex;
 Propiedades del Contenedor

Ejemplo:

flex-direction: column; flex-direction: row;

Ejemplo:
Flex-flow: Es una propiedad de atajo, con la que podemos resumir los valores de las
propiedades flex-direction y flex-wrap, especificándolas en una sola propiedad y
ahorrándonos utilizar las propiedades concretas

Ejemplo:

gap: Es una propiedad de atajo, con la que podemos resumir los valores de las
propiedades row-gap y columna-gap
 Propiedad Valor Descripción
Justify-content  justify-content: flex-start // justifica en el inicio Se utiliza
 justify-content: flex-end // justifica al final para justificar
 justify-content: center // justifica al centro las cajas
 justify-content: space-between // distribuye el
espacio entre cajas
 justify-content: space-around // distribuye
sobre el padre

Propiedad Valor Descripción

Align-items  flex-start: el posicionamiento será al principio del Para justificar el
eje secundario. contenido,
 flex-end: el posicionamiento será al final del eje según su
secundario. contenido
 center: se centran respecto al eje secundario. dentro del
 stretch: llenará el total del eje secundario. contenedor, no
 baseline: se posicionará teniendo en cuenta el todas ocuparan
texto que hay dentro. lo mismo
 Propiedad Valor Descripción
Align-content  flex-start: pegadas entre sí las filas y al inicio del Modos de
eje secundario. alinear las
 flex-end: pegadas entre sí las filas y al final del eje cajas de los
secundario. item cuando
 center: centrado respecto al eje secundario. sobra espacio,
 stretch: Ocupará todo el espacio disponible. no tienen
 space-between: las filas se separan entre ellas y efecto cuando
dejan un espacio proporcional. ocupan sólo
 space-around: las filas se separan y dejan un una línea.
espacio proporcional entre ellas, incluido el
borde.
 Propiedades de los Items
Order: Determina el orden en que aparecerán los elementos. order: <número>; (el valor
estándar es 0)

Flex-grow: Define la habilidad de un flex ítem de crecer, según el caso. El valor de esta
propiedad es un valor numérico sin indicación de unidad, que se utiliza para calcular la
proporción. Este valor dicta la cantidad de espacio disponible en el contenedor que
ocupará el ítem. flex-grow: <numero>; (el valor default(estándar) es 0 )
flex-shrink: Establece la habilidad de un flex ítem para contraerse, según el caso.
flex-shrink: <número>; (el valor estándar es 0)

flex-basis: Establece el tamaño estándar de un elemento antes de que se distribuya el

espacio remanente del contenedor. Puede ser un largo (por ejemplo, 20%, 5rem, etc.) o
una palabra clave.
Tarea:
Diseñar 1 página web de algún tema, teniendo en cuenta la siguiente estructura.

Ing. Oscar Ascón Valdivia 9