Flexbox

Contenido del curso

Introducción, instalación y ambiente de desarrollo

Conceptos básicos

Utilerías

Proyecto: PlatziFood

Conclusiones

29
Conclusiones y qué sigue
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:18

Flexbox

Curso de Tailwind CSS 1

Clase 12 de 29

Clase 12 / 29

Recursos

Dominar Flexbox es fundamental para construir layouts modernos y responsivos con CSS. A través de unas pocas propiedades puedes controlar la dirección, la distribución del espacio y el orden de los elementos dentro de un contenedor, sin necesidad de cálculos manuales ni floats.

¿Cómo funciona la dirección en Flexbox?

Cuando declaras un contenedor como display: flex, automáticamente sus hijos se colocan en fila horizontal. Esa es la dirección por defecto, equivalente a escribir flex-direction: row.

Flex direction [01:30] es la propiedad que define el eje principal del contenedor:

flex-direction: row — los elementos se distribuyen de izquierda a derecha.
flex-direction: column — se apilan de arriba hacia abajo.
flex-direction: row-reverse — van de derecha a izquierda (3, 2, 1).
flex-direction: column-reverse — se apilan de abajo hacia arriba.

Cambiar la dirección es especialmente útil en diseños responsivos donde, por ejemplo, una barra horizontal en escritorio necesita convertirse en una lista vertical en móvil.

¿Cómo se justifican los elementos con Flexbox?

La propiedad justify-content [02:28] controla la distribución de los elementos a lo largo del eje principal (horizontal en row, vertical en column).

justify-content: start — agrupa todo al inicio; es el valor por defecto.
justify-content: end — empuja los elementos hacia el final del contenedor.
justify-content: space-between — el primer elemento toca el borde izquierdo, el último toca el derecho, y el espacio restante se reparte equitativamente entre ellos [03:00].
justify-content: space-around — cada elemento recibe el mismo margen a ambos lados, creando separación uniforme incluso en los extremos [03:28].

Estas variantes permiten distribuir tarjetas, botones o secciones sin recurrir a márgenes fijos.

¿Qué diferencia hay entre space-between y space-around?

Con space-between los extremos quedan pegados a los bordes del contenedor, mientras que con space-around hay espacio visible entre cada elemento y los bordes. La elección depende del diseño visual que necesites.

¿Cómo se alinean los elementos en el eje cruzado?

Mientras justify-content trabaja en el eje principal, align-items [04:05] opera en el eje perpendicular. Si tu dirección es row, align-items controla la posición vertical.

Para notar su efecto necesitas que el contenedor tenga más altura que su contenido; de lo contrario, no habrá espacio donde mover los elementos.

align-items: center — centra los hijos verticalmente.
align-items: start — los envía hasta la parte superior.
align-items: end — los coloca en la parte inferior.
align-items: stretch — los estira para que ocupen toda la altura disponible [05:00].
align-items: baseline — alinea los elementos según la línea base de su texto, útil cuando hay tipografías de diferentes tamaños [05:20].

¿Cuándo usar baseline en lugar de center?

Si dentro de tus elementos hay textos con tamaños distintos y quieres que las letras queden a la misma altura visual, baseline es la opción correcta. Con center los contenedores se centran como cajas, pero las líneas de texto pueden quedar desalineadas.

¿Cómo reordenar elementos con la propiedad order?

Flexbox permite alterar el orden visual sin modificar el HTML mediante la propiedad order [05:50]. Cada elemento recibe un valor numérico y se muestra de menor a mayor:

css .elemento-a { order: 3; } .elemento-b { order: 1; } .elemento-c { order: 10; }

En el ejemplo de la clase, al asignar order: 1 al segundo elemento y order: 10 al tercero, el resultado visual cambia por completo respecto al orden del marcado HTML. Esto resulta muy práctico en diseño responsivo: puedes mostrar un sidebar antes del contenido principal en móvil y después en escritorio, solo cambiando el valor de order dentro de un media query.

Flexbox se ha convertido en una herramienta imprescindible para cualquier desarrollador frontend. Si ya lograste manejar dirección, justificación, alineación y orden, el siguiente paso es combinarlo con media queries para crear interfaces que se adapten a cualquier pantalla. ¿Qué propiedad de Flexbox te resulta más útil en tus proyectos?

Alex Camacho

Profesor

Hace 6 años

Flex es otra propiedad de display pero nos habilita otras propiedades para manipular nuestras cajas. Las propiedades propias de flexbox son:

Flex direction

<div class="flex flex-col">
    <div class="bg-blue-300">1</div>
    <div class="bg-blue-300">2</div>
    <div class="bg-blue-300">3</div>
</div>

Align items

<div class="flex items-center">
    <div class="bg-blue-300">1</div>
    <div class="bg-blue-300">2</div>
    <div class="bg-blue-300">3</div>
</div>

Justify content

<div class="flex justify-center">
    <div class="bg-blue-300">1</div>
    <div class="bg-blue-300">2</div>
    <div class="bg-blue-300">3</div>
</div>

Order

<div class="flex justify-center items-center">
    <div class="order-3 bg-blue-300">1</div>
    <div class="order-1 bg-blue-300">2</div>
    <div class="order-2 bg-blue-300">3</div>
</div>

Flexbox es un tema muy amplio, así que los invito a leer más a detalle sobre este tema en este otro artículo.

Una guía completa de Flexbox!

Jose Canchila

Hace 5 años

gracias.

Comentarios (21)21 comentarios

Stiven Jiménez

Guillermo Baldán López

Jose Morales Varon

Hermes Aguilar

Fabian Romero

Jimmy Buriticá Londoño

Fernando Molano Castrillón

Rubén Ernesto Aragón Gil

Hace 4 años

KEVIN BRAYAN LUNA FIGUEROA

Hace 7 años

Platzi Team

Miguel Angel Reyes Moreno

Angélica Rocha

Marco Antonio Alducin Garcia

Jefferson Andres Espejo Goez

Teresa Carbajal Herrera

Gabriel Alejandro Delgado Álvarez

Gonzalo Pimentel

Daniel Esteban Santos Mendez

Diego Alfonso Najera Ortiz

Carlos Enrique Rojas Falcone

Raúl Baltazar

Gilbert Ardila

Introducción, instalación y ambiente de desarrollo

¿Qué es Tailwind CSS?

Instalación y ambiente de desarrollo

Directivas de Tailwind

Conceptos básicos

Personalización y configuración

Responsive Design, Mobile First y Utility First

Utilerías

Colores

Cómo crear grids o columnas en Tailwind CSS

Dimensiones y Espacios

Cambiando las propiedades de la tipografía

Ajustando el espaciado entre letras y líneas

Display

Flexbox

Crea tus propias utilerías

Entendiendo las variantes y las pseudo-clases

¡Es hora de practicar!

Proyecto: PlatziFood

Creando una card

Aplicando formato a la card

Responsive design en la card

Construye el header

Crea el footer

Crea un banner

Cómo integrar una card

Forms

Directivas de Apply

Extraer componentes

Navbar

Alpine JS

Optimiza tu archivo: PurgeCSS y NanoCSS

Conclusiones

Conclusiones y qué sigue

Flexbox