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

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:

• 
  Flexbox
  Una guía completa para la alineación en Flexbox
  Anna Monus
• 
  Flexbox
  Una guía completa para ordenamientos y reordenamientos de Flexbox
  Anna Monus
• 
  Flexbox
  CSS: Fundamentos de Flexbox
  Craig Campbell
• 
  CSS
  6 proyectos de Flexbox para diseñadores web
  Craig Campbell

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:

1

<div class="wrapper">

2

  <header class="page-header">

3

    <!-- content here -->

4

  </header>

5

  <main class="page-main">

6

    <!-- content here -->

7

  </main>

8

  <footer class="page-footer">

9

    <!-- content here -->

10

  </footer>

11

</div>

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:

1

.wrapper {

2

  display: flex;

3

  flex-direction: column;

4

  min-height: 100vh;

5

}

6

7

.wrapper > * {

8

  padding: 20px;

9

}

10

11

.page-main {

12

  flex-grow: 1;

13

}

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:

1

body {

2

  display: flex;

3

  flex-direction: column;

4

}

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:

1

<header class="page-header">

2

  <nav>

3

    <h2 class="logo">

4

      LOGO

5

    </h2>

6

    <ul>

7

      <!-- list items here -->

8

    </ul>

9

    <button class="cta-contact">

10

      get in touch

11

    </button>

12

  </nav>

13

</header>

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

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

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:

1

.page-header nav {

2

  display: flex;

3

  flex-wrap: wrap;

4

  justify-content: space-between;

5

  align-items: center;

6

}

7

8

.page-header ul {

9

  display: flex;

10

  order: 1;

11

  width: 100%;

12

  margin-top: 15px;

13

}

14

15

@media screen and (min-width: 550px) {

16

  .page-header ul {

17

    width: auto;

18

    margin-top: 0;

19

  }

20

21

  .page-header .cta-contact {

22

    order: 1;

23

  }

24

}

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.

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

1

<main class="page-main">

2

  <div>

3

    <!-- content here -->

4

  </div>

5

</main>

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

1

/* variables */

2

:root {

3

  --main-white-color: white;

4

  --main-purple-color: #9e89b8;

5

}

6

7

.page-main {

8

  display: flex;

9

  flex-direction: column;

10

  justify-content: center;

11

  min-height: 350px;

12

  background: var(--main-purple-color) url(IMG_SRC) no-repeat center / cover;

13

  background-blend-mode: luminosity;

14

  color: var(--main-white-color);

15

}

16

17

.page-main div {

18

  max-width: 500px;

19

}

20

21

@media screen and (min-width: 768px) {

22

  .page-main {

23

    padding-left: 90px;

24

  }

25

}

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.

• 
  Color
  Modos de mezcla en CSS: Teoría del color y su aplicación práctica
  Jonathan Cutrell

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:

1

<footer class="page-footer">

2

  <small>

3

    <!-- content here -->

4

  </small>

5

  <ul>

6

    <!-- list items here -->

7

  </ul>

8

</footer>

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

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

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

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:

1

.page-footer {

2

  display: flex;

3

  flex-direction: column-reverse;

4

}

5

6

.page-footer ul {

7

  display: flex;

8

  font-size: 1.5rem;

9

  margin-bottom: 5px;

10

}

11

12

@media screen and (min-width: 550px) {

13

  .page-footer {

14

    flex-direction: row;

15

    justify-content: space-between;

16

    align-items: center;

17

  }

18

19

  .page-footer ul {

20

    margin-bottom: 0;

21

  }

22

}

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.

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!