Menú lateral

CSS Flexbox

Compartir
PorPublicado el

CSS Flexbox

Diseño responsivo

Gracias a los media queries podemos aplicar estilos dependiendo de la pantalla donde se esté cargando el sitio web.

PropiedadFunción
@media screen and (max-width: px) { }Esto quiere decir: Cuando se detecte una pantalla y tenga un tamaño máximo especificado ejecute los estilos que están dentro de las llaves.
@media screen and (min-width: px) { }Esto quiere decir: Cuando se detecte una pantalla y tenga un tamaño mínimo especificado ejecute los estilos que están dentro de las llaves.

Responsive design con flexbox

PropiedadFunción
display:flexSe utiliza para crear un contenedor flexible. Este organiza sus elementos en línea (coloca los elementos uno al lado del otro) pero con la propiedad flex-direction puedes establecer la dirección de estos.
flex-direction: rowEsta es la propiedad con la que viene por defecto display:flex y lo que hace es colocar los elementos uno al lado del otro.
flex-direction: row-reverseColoca los elementos uno al lado del otro pero organiza los elementos al revés.
flex-direction: columnColoca los elementos en forma de columna.
flex-direction: column-reverseColoca los elementos en forma de columna pero organiza los elementos al revés.
flex-wrap: wrapLos elementos hijos comenzarán a envolverse o saltar a una nueva línea cuando no haya suficiente espacio horizontal para acomodarlos. Esto significa que, en lugar de encogerse o desbordarse, los elementos que no quepan en la misma línea se colocarán en la siguiente línea dentro del contenedor.
flex-wrap: wrap-reverseLos elementos hijos comenzarán a envolverse o saltar a una nueva línea cuando no haya suficiente espacio horizontal para acomodarlos pero los elementos se organizarán al revés
flex-wrap: nowraplos elementos flexibles se ajustarán en una sola línea, incluso si no hay suficiente espacio para mostrar todos los elementos sin que se superpongan o se desborden del contenedor. Esto significa que los elementos flexibles se reducirán o se estirarán para caber en una sola fila, manteniendo su tamaño original en la dirección del eje principal (ya sea horizontal o vertical). Los elementos tendrán un ancho dinámico.
flex-flowPermite combinar las propiedades de flex-direction y flex-wrap en una sola declaración. Por ejemplo: flex-flow: row wrap;
justify-content: flex-startLos elementos hijos se alinearán hacia el comienzo del contenedor en la dirección del flujo principal. La dirección del flujo principal depende de la propiedad flex-direction.
justify-content: flex-endLos elementos hijos se alinearán hacia el final del contenedor en la dirección del flujo principal. La dirección del flujo principal depende de la propiedad flex-direction.
justify-content: centerLos elementos hijos se alinearán en el centro del contenedor en la dirección del flujo principal. La dirección del flujo principal depende de la propiedad flex-direction.
justify-content: space-betweenDistribuye los elementos hijos a lo largo del eje principal con un espacio igual entre ellos, dejando un espacio en blanco entre cada par de elementos.
justify-content: space-aroundDistribuye los elementos hijos a lo largo del eje principal con un espacio igual alrededor de ellos. el espacio sobrante se distribuirá de manera equitativa alrededor de cada elemento hijo, lo que significa que habrá un espacio igual tanto antes como después de cada elemento. Además, también habrá un espacio igual entre cada par de elementos adyacentes.
align-itemsEsta propiedad se aplica directamente a los elementos hijos dentro del contenedor con display: flex. Lo que hace es alinear los elementos hijos individualmente a lo largo del eje transversal. Si hay espacio adicional en el eje transversal, align-items distribuirá los elementos hijos verticalmente según la alineación especificada (por ejemplo, flex-start, center, flex-end, baseline, o stretch). solo tiene efecto si los elementos hijos tienen una altura menor que la altura del contenedor en el eje transversal.
align-items: flex-startAlinea los elementos hijos a lo largo del eje vertical Esta propiedad alinea los elementos en la parte superior.
align-items: flex-endAlinea los elementos hijos a lo largo del eje vertical Esta propiedad alinea los elementos en la parte inferior.
align-items: centerAlinea los elementos hijos a lo largo del eje vertical Esta propiedad alinea los elementos en la parte central.
align-items: stretchEstira automáticamente los elementos hijos para que ocupen toda la altura del contenedor en el eje vertical.
align-items: baselineLos elementos hijos se alinearán verticalmente de tal manera que sus líneas de base estén todas alineadas en la misma posición. La "línea de base" hace referencia a la línea imaginaria donde descansan las letras y caracteres dentro de cada elemento, como si estuvieran escritos en una línea de texto.
align-contentEsta propiedad se aplica al contenedor con display: flex. Lo que hace es controlar cómo se distribuyen los elementos hijos cuando hay espacio adicional en el eje transversal. align-content solo tiene efecto si hay más espacio disponible en el eje transversal que la suma de las alturas de los elementos hijos. Esta propiedad afecta la distribución de todo el bloque de elementos en el contenedor, no a cada elemento individualmente. Este se usa cuando tienes más de una línea de elementos.
Diferencia entre align-items y align-contentalign-items se enfoca en la alineación de los elementos hijos individualmente dentro del contenedor, mientras que align-content se enfoca en la distribución y alineación del bloque completo de elementos dentro del contenedor en función del espacio disponible en el eje transversal.
align-content: flex-startAlinea los bloques de elementos en el eje transversal (eje perpendicular) al principio del contenedor cuando hay espacio adicional en ese eje.
align-content: flex-endAlinea los bloques de elementos en el eje transversal (eje perpendicular) al final del contenedor cuando hay espacio adicional en ese eje.
align-content: centerAlinea los bloques de elementos en el eje transversal (eje perpendicular) al centro del contenedor cuando hay espacio adicional en ese eje.
align-content: space-betweeenDistribuye el espacio disponible entre las filas o columnas de un contenedor flexbox, de manera que se coloquen con igual espaciado entre ellas. Este valor solo tiene efecto cuando hay múltiples filas o columnas dentro del contenedor y cuando el espacio disponible es mayor que el necesario para mostrar todos los elementos.
align-content: space-aroundSe utiliza en contenedores flexbox para distribuir el espacio disponible alrededor de las filas o columnas, generando espaciado uniforme entre los elementos y también entre los bordes del contenedor y los elementos en el extremo. Este valor solo tiene efecto cuando hay múltiples filas o columnas dentro del contenedor y cuando el espacio disponible es mayor que el necesario para mostrar todos los elementos..

Propiedades flexbox para elementos hijo

PropiedadFunción
orderPermite asignar un orden (con un número entero) a cada elemento mediante su selector bien sea clase o id.
flex-growes parte de la especificación Flexbox y se utiliza para controlar cómo se distribuye el espacio adicional disponible dentro de un contenedor flexible (flex container) entre los elementos flexibles (flex items). Cuando los elementos flexibles tienen espacio disponible y el contenedor tiene más espacio del necesario para mostrar todos los elementos a su tamaño original, el flex-grow determina cómo se reparte ese espacio adicional entre los elementos.
flex-grow: 0El elemento no crecerá y mantendrá su tamaño original, incluso si hay espacio adicional disponible en el contenedor.
flex-grow: 1El elemento crecerá proporcionalmente junto con los otros elementos flexibles en el contenedor para ocupar el espacio adicional disponible.
flex-grow: (Con un valor mayor que 1)El elemento crecerá más que los otros elementos flexibles con un valor de flex-grow menor, lo que significa que este elemento tendrá más prioridad para ocupar el espacio adicional.
flex-shrink: 1es parte de la especificación Flexbox y se utiliza para controlar el comportamiento de un elemento flexible (flex item) cuando el contenedor (flex container) no tiene suficiente espacio para mostrar todos los elementos. Cuando hay insuficiente espacio disponible en el contenedor para acomodar a todos los elementos flexibles, el flex-shrink determina cómo se reducirá el tamaño de cada elemento para ajustarse al espacio disponible.
flex-shrink: 0El elemento no se reducirá y mantendrá su tamaño original, incluso si eso implica desbordar el contenedor.
flex-shrink: 1El elemento se reducirá proporcionalmente junto con los otros elementos flexibles en el contenedor para que todos quepan dentro del contenedor..
flex-shrink (con un valor mayor que 1)El elemento se reducirá más que los otros elementos flexibles con un valor de flex-shrink menor, lo que significa que este elemento tendrá más prioridad para reducirse y ajustarse al espacio disponible.
flex-basis: 1se utiliza para establecer el tamaño inicial de un elemento flexible (flex item) en el eje principal (ya sea horizontal o vertical) antes de que el espacio adicional se distribuya entre los elementos utilizando las reglas de flex-grow y flex-shrink. El valor de flex-basis puede ser un tamaño específico (por ejemplo, 100px, 50%, etc.) o la palabra clave auto, que indica que el tamaño inicial del elemento se calculará automáticamente basado en su contenido o las dimensiones establecidas por otros atributos CSS, como width o height.
flex:Se utiliza para abreviar y establecer tres propiedades de Flexbox en un solo lugar. El orden de los valores dentro de la propiedad "flex" es el siguiente: flex-grow, flex-shrink y flex-basis.
align-selfes una propiedad de Flexbox que se utiliza para controlar la alineación y posicionamiento individual de un elemento flexible (flex item) dentro de un contenedor flexible (flex container) en el eje cruzado (eje perpendicular al eje principal). Mientras que align-items se aplica a todos los elementos flexibles en el contenedor, align-self se utiliza para anular la alineación predeterminada para un elemento específico, permitiendo alinear ese elemento de manera diferente al resto.
align-self: autoEs el valor predeterminado y la alineación se heredará del valor de align-items del contenedor.
align-self: flex-startEl elemento se alinea en el inicio del eje cruzado del contenedor.
align-self: flex-endEl elemento se alinea en el final del eje cruzado del contenedor.
align-self: centerEl elemento se alinea en el centro del eje cruzado del contenedor.
align-self: baselineEl elemento se alinea con la línea de base de los demás elementos dentro del contenedor.
align-self: stretchEl elemento se estira para ocupar todo el espacio disponible en el eje cruzado. Esto solo tiene efecto si el tamaño inicial del elemento en el eje cruzado es menor que el espacio disponible.
Publicar un comentario

Comentarios

Haz comentarios o preguntas acerca de este artículo respetando las normas de la comunidad ¡Les damos la bienvenida!