Cómo implementar el desplazamiento horizontal usando Flexbox

Si crea sitios web, es probable que se le haya pedido que cree un componente de desplazamiento horizontal. Es extremadamente fácil implementar esto usando solo unas pocas líneas de Flexbox. Déjame enseñarte como.

Diseño del proyecto

Necesitamos crear un contenedor que contendrá todas las imágenes que queremos desplazar. Aquí está el código:

Diseñar el proyecto

El siguiente paso es agregar estilo para que el contenedor se desplace horizontalmente. Para hacer esto, hago que el contenedor se muestre como flexbox. Además, estoy configurando el valor de desbordamiento-x en automático. Aquí está el estilo:

.container { display: flex; overflow-x: auto;}

Así es como se ve el desplazamiento horizontal:

Eso proporciona nuestro requisito de un área de desplazamiento horizontal. No estoy satisfecho con su apariencia. Hay tres cosas que quiero cambiar:

  • Agrega espacio en blanco entre las imágenes
  • Deshazte de la barra de desplazamiento horizontal
  • Coloque la rueda de desplazamiento en el medio de la pantalla.

Las imágenes son conmovedoras. Agreguemos un espacio en blanco entre ellos. Aquí está el CSS para esto:

.container img { margin-right: 15px;}

A continuación, quiero deshacerme de la barra de desplazamiento horizontal que puedo hacer con este código:

.container::-webkit-scrollbar { display: none;}

El último cambio que quiero hacer es centrar el desplazamiento en el centro de la pantalla. Por defecto, la altura del html es la altura de los elementos. Necesito que la altura sea el 100% de la ventana gráfica. Flexbox proporciona una forma de centrar elementos con la configuración de alinear elementos. Para usar esta funcionalidad, convertiré el bodyarchivo para mostrarlo como flexbox. Aquí está el código que voy a agregar para el cuerpo:

body { display: flex; align-items: center; height: 100vh;}

Con estos cambios, así es como se ve nuestra área de desplazamiento horizontal final.

Conclusión

Es muy fácil crear un área de desplazamiento horizontal usando flexbox. Gracias por leer.

Aquí hay algunos artículos más que le gustaría leer:

Aquí hay 5 diseños que puede hacer con FlexBox

El diseño de caja flexible de CSS - Flexbox - proporciona una solución simple a los diseñadores de problemas de diseño y diseño y… hackernoon.com Piense fuera de la caja con CSS shape-outside

CSS se basa en un modelo de caja. Si tiene una imagen que es un círculo sobre el que desea ajustar el texto, se ajustará ... hackernoon.com Aprenda la propiedad CSS border-radius construyendo una calculadora

¿Alguna vez ha visto un botón en una página web que tiene bordes redondeados? ¿Alguna vez has visto una imagen que se ajuste a un… medium.freecodecamp.org