Post Top Ad

Your Ad Spot

jueves, 25 de junio de 2020

Tutorial CSS Flexbox

Flexbox también se conoce como Módulo de diseño de caja flexible de CSS y brinda a los diseñadores web un control completo sobre cómo organizar los elementos de la página a lo largo de un eje. Flexbox se utiliza para crear barras de menú sensibles, galerías de imágenes, listados de productos y todo tipo de otros componentes de la página. El punto clave sobre Flexbox es la capacidad de hacer que los elementos se flexionen, lo que cambia su ancho y altura para llenar el espacio en una dimensión dada. Esto permite que los elementos de la página se estiren y encojan dentro de sus contenedores, lo que reduce el desperdicio de espacio y el desbordamiento, lo que facilita la creación de diseños receptivos.

Nuestro primer diseño de Flexbox

Para comenzar con nuestro primer diseño de flexbox, necesitamos configurar solo un contenedor muy básico con algunos elementos. Usaremos el siguiente html y css si desea seguirlo.
html
css
Esto nos da lo que esperaríamos como resultado. Tres elementos de nivel de bloque, apilados uno encima del otro, y ocupando todo el ancho del navegador.
comenzando con flexbox

Contenedor y Artículos

En flexbox tenemos un contenedor y sus artículos . Estos son los dos componentes de cualquier componente flexbox. Cualquier elemento html que sea un hijo directo del contenedor flexbox, se convierte en un elemento flexbox. Con ese conocimiento, ahora podemos transformar nuestra pantalla basada en bloques en una pantalla de flexbox. Todo lo que necesitamos hacer es agregar una pantalla flexal contenedor así.
Al asignar pantalla: flex; en el contenedor principal, nuestros artículos ahora se organizan horizontalmente en lugar del comportamiento apilado original. Esto nos muestra que, por defecto, flexbox muestra elementos que van de izquierda a derecha en el contenedor.
flexbox display de contenedores flex

El eje Flexbox (principal y transversal)

En flexbox tenemos lo que se conoce como un eje principal que se ejecuta de izquierda a derecha , y un eje transversal que se ejecuta de arriba a abajo . Esto determina la dirección del contenedor flexbox. Un contenedor flexbox siempre tiene una dirección. Por defecto, la dirección es horizontal con elementos que se muestran de izquierda a derecha. Esto también se conoce como una fila . Esto es importante porque se utilizan diferentes propiedades css para controlar los elementos de flexbox en función de si están en el eje principal o en el eje transversal. El eje del contenedor flexbox se controla con la flex-directionpropiedad.
Podemos convertir nuestro primer diseño de flexbox de una fila a una columna con este CSS.
Ahora, el contenedor flexbox apila los elementos de arriba a abajo en lugar de izquierda a derecha. He aquí la parte complicada. El eje de arriba a abajo ahora es el eje principal, y de izquierda a derecha es el eje transversal.
columna flexbox flex-direction
Aquí hay un diagrama para explicar el concepto visualmente.
diagrama de dirección flexible
La dirección de flexión: fila; el valor será suficiente para una gran cantidad de casos de uso, y cuando recién comienza con flexbox tiene sentido usarlo rowpara aprender.

Justifique el contenido con Flexbox

Continúe y vuelva a colocar la dirección de flexión en fila, de modo que tengamos el diseño de izquierda a derecha. Ahora, comenzaremos a ver la colocación de elementos flexibles a lo largo del eje principal. Como ahora volvemos a la dirección flexible: fila; - esto significa que el eje principal se ejecuta horizontalmente de izquierda a derecha.

justify-content: inicio flexible;

Este es el valor predeterminado, por lo que el diseño ocurre de esta manera, incluso si no lo especifica explícitamente.
justificar contenido flex start

justify-content: flex-end;

Este valor mueve los elementos flexibles al final del contenedor flexible.
justificar contenido flex end

justify-content: centro;

La asignación del centro a la propiedad justify-content alinea los elementos flexibles al centro del contenedor flexible.
justificar contenido ejemplo de centro flexible

justify-content: espacio intermedio;

El valor de espacio intermedio coloca una cantidad uniforme de espacio entre los elementos flexibles, pero no agrega espacio en los extremos.
espacio entre elementos flexibles

justify-content: espacio alrededor;

Funciona igual que arriba, excepto que agrega espacio en los extremos.
espacio alrededor en flex itms

Posicionar elementos en Flexbox

Definitivamente, tendrá que colocar elementos flexibles individuales en un contenedor de flexbox en los casos en que las opciones estándar de contenido de justificación que acabamos de comentar no funcionen. ¿Qué sucede si desea dos elementos flexibles en un lado y el otro elemento flexible en el otro lado? Podemos usar la marginpropiedad en este caso. Necesitamos comenzar a apuntar a elementos individuales ahora, por lo que actualizamos cada elemento para tener una clase única.
Imagine que queremos mover el elemento Servicios a la derecha, pero deje los elementos Inicio y Acerca de como están. ¿Cómo podemos hacer eso? Veamos este css actualizado ahora.
Esto nos permite posicionar fácilmente elementos individuales a lo largo del eje principal. ¡Se ve bien!
elemento flexible con margen izquierdo automático
Para mover los elementos Acerca de y Servicios, simplemente podemos orientar el elemento Acerca de este modo.
mover dos elementos flexibles hacia la derecha

La flexpropiedad

Te encantará esta pequeña propiedad genial en flexbox. La propiedad flex hace que los elementos flex se vuelvan receptivos dentro del contenedor flexbox y es posible que tenga algunos efectos realmente geniales. Imagine que queremos que cada elemento flexible se estire completamente de izquierda a derecha para que cada elemento ocupe una cantidad igual de ancho. Podemos aplicar este CSS.
diseño de tres columnas flexbox
Ahora hagamos solo un elemento flexible dos veces más ancho que los otros elementos. Solo podemos orientar el elemento Servicios y configurar su flex en 2.
elemento flexible establecido en 2
Muchas veces simplemente puede configurar un elemento para que haga todo el flexión, mientras que los otros mantienen un ancho fijo. En el ejemplo a continuación, el elemento Acerca de se flexionará en todos los tamaños de pantalla, mientras que Inicio y Servicios mantienen un ancho fijo.
propiedad flex solo en un elemento flex
Ahora también podemos hacer que dos elementos flexibles crezcan y se contraigan, mientras que el otro mantiene un ancho fijo. En este ejemplo, la sección Acerca de mantendrá un ancho fijo mientras que las secciones Inicio y Servicios crecen y se reducen dinámicamente.
dos artículos flexibles un artículo fijo

Alinear elementos con Flexbox

Veamos ahora cómo colocar elementos flexibles a lo largo del eje cruzado. Recuerde, el eje se determina en función de la dirección del contenedor flexible. Para simplificar, nos quedamos con la dirección flexible de la fila . Esto significa que el eje cruzado es el eje de arriba a abajo. Por defecto, los elementos flexibles se estirarán a través del Eje cruzado. Para demostrar esto, podríamos hacer que nuestro contenedor flexible tenga una altura de 200 píxeles, y cada elemento aún llenará el espacio de arriba a abajo. Echale un vistazo.
los elementos de alineación de flexbox se estiran por defecto
Cuando un contenedor de flexbox tiene una altura mayor que los elementos flexibles contenidos en él, podemos usar la propiedad de alinear elementos para posicionar en el eje cruzado. Aquí están algunos ejemplos.

alinear elementos: inicio flexible;

Al asignar flex-start a la propiedad align-items , los elementos flex se alinean en la parte superior del contenedor flex.
flexbox alinear elementos inicio flexible

alinear elementos: centro;

El valor central coloca los elementos flexibles en el medio del contenedor flexible.
centro de elementos de alineación de flexbox

elementos de alineación: extremo flexible;

El valor del extremo flexible coloca elementos flexibles en la parte inferior del contenedor flexible.
flexbox alinear elementos flex end

elementos de alineación: línea de base;

El valor de referencia alinea los elementos en el contenedor flexible en función del contenido de cada elemento flexible. Para demostrar esto, necesitamos cambiar el contenido que contiene cada elemento. Simplemente podemos asignar diferentes tamaños de fuente a cada elemento flexible. Tenga en cuenta que aunque cada elemento flexible tiene contenido de diferente tamaño, la parte inferior del texto para cada elemento se alinea perfectamente.
ejemplo de línea base de elementos de alineación de flexbox

Centrado perfecto con Flexbox

Lo que puede haber traído más felicidad a los diseñadores web de todo el mundo es la capacidad de centrar perfectamente un elemento tanto horizontal como verticalmente usando flexbox. Todo lo que tiene que hacer es aplicar ambos elementos de alineación: centro; y justificar-contenido: centro; al contenedor flexbox.
centro flexbox vertical y horizontalmente

Alinear elementos flexibles individuales

Al igual que con Justify anteriormente, es posible que deseemos un control más preciso sobre la forma en que los elementos se alinean en el eje transversal. Para esto, podemos usar align-self en artículos flexibles individuales. En este primer ejemplo, podemos orientar nuestra sección Acerca de y moverla a la parte superior.
flexbox alinear inicio auto flex
Ahora quizás queremos apuntar a un elemento flexible diferente y moverlo al fondo. No hay problema.
Flexbox alinea el extremo flexible

Cambiar la dirección del eje con column

Ok, estamos haciendo un gran progreso con Flexbox, ¿ya nos estamos divirtiendo? Entonces, ahora vamos a lanzar una llave inglesa en esta sesión y cambiar la forma en que el contenedor flexbox funciona por completo. En flexbox, recuerde que la dirección flex predeterminada es fila . Esto significa que los elementos fluyen de izquierda a derecha. También puede ser una columna que cambiará la dirección de los elementos para que sea de arriba a abajo. Para confundir más le da un mayor control también puede revertir a ambos, con filas inversa y la columna-reversa ! ¡Además, el eje principal y el eje transversal son diferentes para cada escenario!

justify-content: inicio flexible;

columna de dirección flexible justifica el contenido inicio flexible

justify-content: flex-end;

columna de dirección flexible justifica el contenido extremo flexible

justify-content: centro;

columna de dirección flexible justificar contenido centro flexible

justify-content: espacio intermedio;

la columna de dirección flexible justifica el espacio de contenido entre

justify-content: espacio alrededor;

la columna de dirección flexible justifica el espacio de contenido alrededor

justify-content: espacio de manera uniforme;

la columna de dirección flexible justifica el espacio de contenido de manera uniforme

Resumen del eje Flexbox

El eje principal y el eje cruzado cambian según el valor de la dirección de flexión.

dirección flexible: fila;

El eje principal se desplaza de izquierda a derecha y el eje transversal se desplaza de arriba a abajo.
fila de dirección de flexión axix

dirección flexible: columna;

El eje principal se desplaza de arriba a abajo y el eje transversal se desplaza de izquierda a derecha.
columna de dirección de flexión axix

dirección flexible: reverso de fila

El eje principal se desplaza de derecha a izquierda y el eje transversal se desplaza de arriba a abajo.
dirección flexible fila-eje inverso

dirección flexible: columna inversa;

El eje principal se desplaza de abajo hacia arriba y el eje transversal se desplaza de izquierda a derecha.
dirección flexible columna-eje inverso

Envolviendo en Flexbox

En diseños flotantes , los artículos se envuelven todo el tiempo. En flexbox, la configuración predeterminada es que los elementos flexibles no se envuelvan . Los elementos flexibles solo se ajustarán si el diseñador lo dice explícitamente. Para activar el ajuste, podemos configurar flex-wrap para ajustar . Podemos configurar cada elemento flexible en un valor amplio, digamos 343 píxeles. También podemos activar la función de ajuste de esta manera.
Flexbox Flex-wrap activado
Si comentamos el flex-wrap: wrap; declaración, los artículos flexibles no se envolverán aunque se les asigne un ancho que debería extenderse claramente más allá del contenedor flexible. Lo que sucede en este escenario es que flexbox reduce automáticamente cada elemento de la lista para que quepa en el espacio dado.
envoltura flexible desactivada

Flex crezca, encoja y base

Vimos anteriormente cómo el uso de la flexpropiedad nos permitió hacer que cada elemento flexible creciera y se redujera automáticamente según fuera necesario. En otras palabras, esta propiedad hizo que todo respondiera . La flexpropiedad es en realidad una notación abreviada para usar otras tres propiedades. Esos son flex-growflex-shrinkflex-basisLos siguientes tres bloques css son equivalentes.
Examinemos cada propiedad. La propiedad de base flexible es una forma de establecer el tamaño principal inicial de un elemento flexible.
La propiedad flex-grow establece la cantidad de crecimiento dinámico de un elemento flex. Determina cuánto espacio disponible en el contenedor flexible se debe asignar a ese elemento flexible. Si todos los artículos flexibles hermanos tienen el mismo factor de crecimiento flexible, entonces todos los artículos reciben la misma cantidad de espacio disponible. flex-grow determina la cantidad de espacio adicional que se debe distribuir a los diversos elementos flexibles.
La propiedad de contracción flexible establece el factor de contracción dinámica de un elemento flexible. Los artículos flexibles se encogerán para llenar el contenedor de acuerdo con el valor proporcionado, cuando el tamaño predeterminado de los artículos flexibles sea mayor que el contenedor flexible.
Por ejemplo, considere que nuestro contenedor flexbox ahora solo tiene dos elementos flexibles.
Con solo la base flexible establecida para cada elemento flexible, cada elemento no crecerá a medida que el contenedor se expanda. Solo ocuparán un ancho máximo de 200 píxeles. Sin embargo, esto se reducirá si el contenedor se derrumba.
base flexible 200 píxeles
Al agregar la propiedad flex-grow , el resultado está comenzando a actuar un poco más como configurar solo flex . Cada artículo crecerá igual a medida que el contenedor se expanda.
ejemplo de base flexible y crecimiento flexible
Las siguientes reglas establecen lo siguiente. La sección Acerca de y Servicios comenzará en 200 píxeles. Luego, se asignará espacio adicional a los Servicios y no se asignará espacio adicional a Acerca de.
Establecer diferentes valores de crecimiento flexible
El último ejemplo para estas propiedades será flexión por contracción . Observe que la sección Acerca de tiene un encogimiento flexible de 1 mientras que Servicios es 0. Lo que esto significa es que si el contenedor se encoge más pequeño que un tamaño para permitir al menos el ancho inicial de cada elemento flexible, entonces la sección Acerca será la indicada. comenzar a reducirse mientras que los Servicios no lo harán.
ejemplo de contracción flexible

Cómo hacer un pedido con Flexbox

Flexbox tiene una característica similar a la cuadrícula CSS , en la que puede reordenar elementos visualmente, mientras deja intacto el marcado HTML subyacente. Podemos cambiar el HTML solo un poco para que este concepto de pedido sea un poco más fácil de entender. Lo que vamos a hacer ahora es reorganizar cómo aparecen esos elementos flexibles en el navegador sin tocar el marcado HTML. Solo usaremos la orderpropiedad en los artículos flexibles.
html
css
Establecer el ítem 2 con un orden de 1 lo coloca en último lugar en el contenedor.
cómo funciona el orden flexible
La razón del comportamiento anterior es que el valor del pedido no es la ubicación de la posición en la lista de elementos. El valor de la orden funciona asumiendo que todos los elementos flexibles comienzan con un orden de 0. Cuanto mayor sea el valor superior a 0 que tiene un elemento flexible, más hacia el final será empujado. Cuanto más debajo de 0 sea un número (puede ser negativo), más al principio se empujará el elemento. Con eso en mente, tratemos de hacer que el Artículo 2 sea el primero, el Artículo 3 el próximo y el Artículo 1 el último.
Mirando a continuación, obtenemos el resultado que queremos. Utilizamos 10, 20 y 30 como valores para demostrar que el valor numérico no es la posición que ocupa el artículo. Es un peso, por así decirlo. Lo que sucede es que el navegador observa el valor de todos los elementos y los organiza de menor a mayor. El elemento Flex 2 tiene el valor más bajo de 10, por lo que es lo primero. El siguiente valor más bajo es el elemento Flex 3 con un valor de 20, por lo que viene a continuación. El elemento 1 de Flex tiene un valor de 30, por lo que es el último.
ejemplo de orden flexible

Uso de consultas de medios con Flexbox

Un buen truco es hacer uso de las consultas de medios CSS cuando se utilizan diseños de Flexbox. La razón de esto es para que pueda activar el ajuste flexible y especificar la base flexible cuando la ventana gráfica es más pequeña que un tamaño determinado. Primero, actualice nuestro HTML para agregar otro elemento flexible.
Podemos comenzar con este CSS para una vista de escritorio normal .
vista de escritorio de flexbox sin consulta de medios
Ahora queremos crear una vista de tableta . Para pantallas del tamaño de una tableta, un buen diseño apilado de dos en dos sería bueno. Para esto, podemos usar esta práctica consulta de medios. Lo que dice el CSS a continuación es que si el navegador tiene 700 píxeles o menos, active el ajuste flexible y haga que cada elemento flexible tenga una base flexible del 50%. (46% para tener en cuenta el relleno, el margen, etc.).
Eso nos da este bonito diseño en la tableta.
consulta de medios en uso para el diseño de la tableta
Finalmente, podemos agregar a los medios una consulta para la vista móvil de esta manera.
Esto proporciona un buen menú apilado en el dispositivo móvil para facilitar la navegación.
Menú de navegación de Flexbox apilado para dispositivos móviles

Crear una cuadrícula de imagen con Flexbox

¡Flexbox también hace que sea muy fácil crear galerías de imágenes! Aquí tenemos un marcado HTML básico para nuestra galería de imágenes.
¡El único CSS que necesitamos es este!