Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Cómo crear una página responsiva a pantalla completa con Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tutorial, vamos a aprender cómo crear una página a pantalla completa con Flexbox. Nuestra página incluirá una imagen de fondo a pantalla completa, contenido centrado verticalmente y un pie de página adherente.

Aquí hay una ojeada a la página que vamos a crear (la versión en pantalla completa puede darte una mejor idea):

Nota: este tutorial asume que tienes cierta comprensión de flexbox. Si requieres recursos para principiantes, echa un vistazo a estos tutoriales y cursos:

1. Define el contenedor.

Empezamos por definir un contenedor, en el que colocamos tres elementos. Un header, un main, y un footer. Aquí está la estructura de la página:

Queremos que la página sea a pantalla completa, pero cuando la altura de la página es mayor que la altura de la ventana del navegador, queremos que aparezca una barra de desplazamiento.

Gracias a flexbox, podemos crear esta funcionalidad muy fácilmente. Aquí está el código CSS requerido:

Al ajustar flex-grow: 1 en el elemento main, se expande para cubrir el espacio disponible dentro del contenedor flex. Los elementos de header y footer de página tienen sus anchos predeterminados según su contenido.

Advertencia para Internet Explorer

Algunas versiones de Internet Explorer no funcionan bien cuando un contenedor flex tiene una altura mínima. En nuestro ejemplo (si estás interesado en soportar IE), una forma de resolver este problema es añadir la siguiente regla:

Otra solución sencilla es reemplazar min-height: 100vh por height: 100vh.

En cualquier caso, si es necesario respaldar a IE en tus proyectos, escoge el método que mejor se adapte a tu contenido y diseño.

Progreso hasta el momento

Aquí está el pen de inicio que hemos creado (incluyendo algunos colores para más claridad):

Ahora miremos más de cerca a los descendientes del contenedor.

2. La cabecera

La cabecera de nuestra página incluye tres elementos. El logotipo, la navegación y un botón de llamado a la acción. Aquí está el markup de la cabecera:

Su distribución cambia según el tamaño de la ventana. En pantallas estrechas (<550px), se ve así:

The header appearance on narrow screens

En pantallas más anchas, la distribución cambia a la siguiente forma:

The header appearance on wide screens

Para conseguir este ligero cambio de diseño, nuestros estilos deben cumplir los requisitos que siguen:

  • Los elementos deben estar alineados verticalmente.
  • En pantallas reducidas, el menú debería ser el último elemento, mientras que en pantallas más amplias el botón debería ser el último.
  • En pantallas pequeñas, los elementos de la cabecera se envuelven en dos líneas. La navegación en sí cubre la segunda línea. En pantallas más grandes, todos los elementos se distribuyen uniformemente en una sola fila.

Siguiendo un enfoque "móviles primero", veamos las reglas más importantes para nuestra cabecera:

Sugerencia: el valor predeterminado de order de los elementos flexibles es 0. Los elementos con los mismos valores de order se distribuyen de acuerdo con el orden en que aparecen en el documento de origen. Por esta razón, el botón aparece después de la navegación en pantallas anchas (≥ 550px).

3. El contenido principal

El contenido principal de nuestra página consiste de texto centrado verticalmente que se encuentra en la parte superior de una imagen de fondo.

The appearance of the main section of our page

Aquí está la estructura para esta sección:

Y los estilos más importantes, incluyendo a las variables CSS:

Nada complicado ocurre aquí. De nuevo, gracias a flexbox podemos centrar verticalmente los contenidos de main. Además, solo por diversión, aplicamos un modo de mezcla en los navegadores que lo admiten.

4. El pie de página

El pie de página incluye dos elementos; uno que contiene información de derechos de autor y otro con enlaces a canales de redes sociales. Aquí está el markup:

Nuevamente, el diseño aquí debería cambiar según el tamaño de la ventana.

En pantallas estrechas (<550px), se visualiza así:

The footer appearance on narrow screens

En pantallas más anchas, la distribución es la siguiente:

The footer appearance on wide screens

Analizando las capturas de pantalla anteriores, deben suceder las siguientes cosas:

  • En pantallas reducidas, el texto debe ser el último elemento, mientras que en pantallas más amplias, la lista de perfiles sociales debe ser el último.
  • En pantallas reducidas, los elementos del footer se envuelven en dos líneas. Por otro lado, en pantallas más grandes, todos los elementos están centrados verticalmente y distribuidos uniformemente en una sola fila

Los estilos principales para nuestro pie de página:

Iconos

Y en último lugar, aunque no menos importante, para los íconos que se usan en esta sección, he incorporado el paquete de íconos de Ionicons en nuestro pen.

The required CSS settings

Conclusión

En este tutorial hemos tratado el proceso de creación de una página a pantalla completa con Flexbox. El proceso fue simple y nos dio la oportunidad de practicar algunas habilidades diferentes de flexbox.

En un tutorial próximo, daremos un paso más y examinaremos cómo animar los elementos en esta página. ¡Hasta la próxima!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.