Posicionamiento Vertical con Flexbox en CSS

Contenido del curso

Web Developer Fundamentals

HTML

Etiquetas multimedia

Formularios

CSS

Responsive Design

Accesibilidad

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:42

Posicionamiento Vertical con Flexbox en CSS

Curso Definitivo de HTML y CSS

Clase 42 de 56

Clase 42 / 56

Recursos

¿Cómo posicionar contenedores horizontal y verticalmente con Flexbox?

Flexbox es una herramienta poderosa en CSS que permite alinear y distribuir espacio entre los elementos de un contenedor, haciéndolo simple y eficiente tanto para orientaciones horizontales como verticales. En las clases anteriores, nos enfocamos en la disposición horizontal, pero el verdadero poder de Flexbox se manifiesta cuando quieres alinear elementos verticalmente.

¿Cómo cambiar la orientación de los contenedores?

Para cambiar la orientación de los contenedores y llevar el contenido al centro o bordes del contenedor padre, se puede usar Flexbox con propiedades específicas:

Altura del contenedor principal: Primero, es necesario establecer la altura del contenedor principal. Por ejemplo, asignar una altura mediante unidades relativas, como 50vh, asegurará que ocupe el 50% de la altura de la pantalla.
Propiedad align-items: Esta propiedad centraliza el contenido verticalmente con opciones como:
- center: Alinea el contenido al centro del contenedor.
- flex-start: Coloca el contenido en la parte superior.
- flex-end: Envía el contenido al final del contenedor.

¿Qué propiedades de Flexbox inciden en el crecimiento y orden de contenedores?

Flexbox también te permite manipular el crecimiento de los contenedores y su orden sin cambiar el HTML, lo que simplifica el diseño adaptativo.

Propiedad align-items: stretch: Se utiliza para estirar el contenido a llenar el espacio del contenedor padre. Esto funcionará únicamente si no se define una altura fija para los elementos hijos.
Propiedad flex-grow: Una de las características más útiles, permite ajustar el área en el que puede crecer un contenedor específico cuando hay espacio extra:
```
.box1 {
  flex-grow: 1;
}
```
En este ejemplo, la caja 1 crecerá para ocupar el espacio disponible.
Propiedad order: Permite cambiar la posición de los elementos hijos dentro de un contenedor. Un elemento con un orden más bajo se ubicará antes que los que tienen un orden más alto.
```
.box1 { order: 2; }
.box2 { order: 1; }
```
Aquí, el box2 aparecerá antes que el box1, independientemente de cómo fue escrito en el HTML.

¿Qué beneficios trae usar flex-wrap en Flexbox?

Cuando el espacio se vuelve limitado, Flexbox facilita la agrupación de elementos en múltiples líneas sin complicaciones adicionales en CSS, gracias al uso de la propiedad flex-wrap.

Efecto wrap: Al activar esta propiedad, tus contenedores se distribuirán automáticamente en nuevas líneas conforme sea necesario.
```
.container {
  flex-wrap: wrap;
}
```
Esto es especialmente útil para la adaptación a diferentes tamaños de pantalla, característica clave para el diseño web responsivo.

¿Por qué elegir Flexbox para diseño responsive?

Flexbox es una herramienta versátil para layouts escalables que se adaptan automáticamente a diferentes dispositivos y tamaños de pantalla. Su capacidad para redistribuir elementos sin necesidad de desmantelar el CSS subyacente lo hace ideal para el diseño responsive, permitiendo que los elementos se comporten de manera predecible al cambiar el tamaño del viewport.

El poder de Flexbox radica en su simplicidad y funcionalidad avanzada, ahorrando tiempo y esfuerzo en la creación de interfaces de usuario que responden elegantemente a las necesidades del usuario. Como tarea práctica, intenta volver a crear un layout con Flexbox enfocándote en la alineación vertical y juega con diferentes dimensiones de pantalla para ver cómo responden los contenedores. ¡Te sorprenderán los resultados!

Flexbox se convertirá en tu aliado esencial en el diseño adaptable, haciendo que la tarea de crear interfaces complicadas sea más manejable y menos frustrante. Estás preparado para aventurarte más en Flexbox, y recuerda, la práctica y experimentación serán tus herramientas para dominar este potente módulo de CSS.

Héctor Alonso Padilla Ramírez

Hace 6 años

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Desafío Layout</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header class="header-container">
    <nav class="header-nav">
      <figure class="header-logo">
        <img src="./img/logo.png" alt="logo platzi" width="120px">
      </figure>
      <ul class="header-menu">
        <li><a href="#">Clases</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Foro</a></li>
        <li><a href="#">Agenda</a></li>
        <li><a href="#">TV</a></li>
      </ul>
    </nav>
  </header>
  <main class="main-container">
    <aside class="aside-container">
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
    </aside>
    <section class="section-container">
      <article class="article-container">
        <h1 class="article-title">Lorem ipsum dolor sit amet.</h1>
        <p class="article-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, a doloremque accusantium porro quidem veritatis doloribus dicta assumenda voluptates, ut, aspernatur quia delectus placeat culpa fuga nulla soluta quod quibusdam!
        </p>
        <p class="article-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem at impedit itaque. Recusandae quas, nihil libero minus qui repudiandae consequuntur debitis aut accusantium deleniti temporibus nostrum, consequatur explicabo commodi totam!
        Nisi ipsa laudantium reiciendis earum odit rerum quas dignissimos necessitatibus provident cupiditate quasi eaque, voluptatibus minima perferendis iusto at, sed ducimus officiis impedit error, ea iure numquam omnis sit! Repudiandae!
        Dolorem, architecto quidem deserunt soluta doloribus autem quibusdam? Et amet nulla libero facere soluta culpa eaque harum alias. Debitis animi libero incidunt in! Laudantium dicta facilis maxime voluptatem nam? Mollitia!
        Quasi corporis laudantium tenetur commodi, accusantium, odit, iure animi consectetur fuga adipisci eligendi! Ea odit deleniti perferendis necessitatibus esse! Quasi voluptate officiis enim reprehenderit. Magni minus deserunt consectetur illo maxime.
        Voluptatem consequatur maxime exercitationem culpa cum facere nostrum. Velit asperiores neque libero molestias cupiditate non dolorem error nihil laudantium vero odit esse quam quod animi possimus eos numquam, voluptate doloremque.
        </p>
        <div class="article-cards_container">
          <div class="article-card html"><p>HTML5</p></div>
          <div class="article-card css"><p>CSS3</p></div>
          <div class="article-card js"><p>JS</p></div>
        </div>
      </article>
    </section>
  </main>
  <footer class="footer-container">
    <section class="footer-slogan">
      <p class="footer-text_slogan">Transformamos la economía de nuestros países entrenando a la próxima generación de profesionales en tecnología.</p>
    </section>
    <section class="footer-social">
      <p class="footer-text_social">Aprende en nuestras redes:</p>
      <nav class="footer-nav">
        <ul class="footer-menu">
          <li><a href="#"><img src="./img/twitter.png" alt="Twitter" width="30%"></a></li>
          <li><a href="#"><img src="./img/youtube.png" alt="Twitter" width="30%"></a></li>
          <li><a href="#"><img src="./img/facebook.png" alt="Twitter" width="30%"></a></li>
          <li><a href="#"><img src="./img/instagram.png" alt="Twitter" width="30%"></a></li>
        </ul>
      </nav>
    </section>
  </footer>
</body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: sans-serif;
  background-color: #f6f6f6;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: #b7bbc4;
}

li {
  display: inline-block;
  font-size: 1.6rem;
  list-style: none;
  color: white;
}

.header-container {
  width: 100%;
  background-color: #121f3d;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5rem;
  height: 8rem;
  flex-wrap: wrap;
}

.header-menu li {
  font-weight: bold;
  padding: 0 3rem;
}

.main-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
}

.section-container {
  padding: 2rem;
  background-color: #f6f6f6;
}

.article-title {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.article-subtitle {
  font-size: 3rem;
  color: #b7bbc4;
  margin-bottom: 3rem;
}

.article-text {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.article-cards_container {
  display: flex;
  flex-wrap: wrap;
}

.article-card {
  width: 25rem;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
  color: white;
  padding: 1rem;
  font-size: 5rem;
  border-radius: 1rem;
}

.html {
  background-color: #e45126;
}

.css {
  background-color: #0c73b8;
}

.js {
  background-color: #e4a228;
}

.aside-container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #1e5270;
}

.aside-article {
  width: 30rem;
  color: white;
  background-color: #33b1ff;
  border-radius: 0.5rem;
  padding: 2rem;
  margin: 1rem;
}

.aside-title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.aside-text {
  font-size: 1.5rem;
}

.footer-container {
  width: 100%;
  color: white;
  background-color: #1c3643;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 15rem;
  padding: 0 5rem;
}

.footer-slogan {
  width: 30rem;
  font-size: 1.5rem;
}

.footer-social {
  font-size: 1.5rem;
}

.footer-text_social {
  margin-bottom: 1rem;
}

John Alassio

Hace 4 años

Muy bueno! muchas gracias

Comentarios (539)539 comentarios

Carlos Adrian Rodriguez Bernales

Tomás Oyono

Alonso Fabricio Samanez Nuñez

Anthony Ismael Manotoa Moreno

Jimmy Buriticá Londoño

Irving Juárez

Jhean Pacheco

Joel Dominguez Merino

Erick Fernando Guzmán Valerio

Carlos David Ramírez Gómez

David Solorzano

Efraín Hernández García

Alexis Steven Valderrama

Juan Jose Arcani

Andres Badillo

Hace 5 años

Anderson Josué Oroya Silva

Juan Sebastián Vargas Castañeda

Alessandra García

Lucas Martinez Asensio

Jhorjan Sneyder Martinez Soto

Juan Torrealba

Carol Natalia Ramirez Gil

Gerardo Emanuel Gomez

Arnaldo José Cisneros Zambrano

Edison Manrique

Jorge Ayala

Freddy Aldair Muñoz Huasasquiche

ERWIN CEDEÑO

Diego Alvaro Parra Abad

Rocio Agromayor

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Responsive Design

Responsive Design: Estrategias Mobile First

Patrones de Diseño Responsive: Mobile First a Desktop

Media Queries para Diseño Responsive Mobile y Tablet

Patrón Layout Shifter en Diseño Mobile First

Patrón de Diseño Responsive: Column Drop en CSS

Diseño Responsive: Estrategias y Ejemplos Prácticos

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Accesibilidad

Accesibilidad Web: HTML Semántico para Proyectos Inclusivos

Uso de medidas relativas para accesibilidad en texto web

Atributos HTML para Mejorar la Accesibilidad Web

Próximos pasos

Próximos Pasos en Desarrollo Web: Mobile First y Más

Recursos Visuales para Desarrolladores Web

Posicionamiento Vertical con Flexbox en CSS