Artículos de Tecnología > Front End

Flexbox CSS: Guia Completo, Elementos y Ejemplos

juliana-amoasei
juliana-amoasei

Flexbox tiene como meta ser una forma más eficiente de crear diseños, alinear y distribuir espacios entre ítems en un contenedor, incluso cuando las dimensiones de esos ítems son desconocidas y/o dinámicas (en virtud de eso el término "flex").

Aprendamos los fundamentos de CSS Flexbox para la alineación y el posicionamiento, y cómo usar sus funcionalidades correctamente.

Qué es el Flexbox

Durante mucho tiempo, las únicas herramientas disponibles para crear diseños CSS y posicionar elementos con buena compatibilidad entre browsers eran float y position. Sin embargo, estas herramientas tienen algunas limitaciones muy frustrantes, especialmente cuando se trata de responsividad. Algunas tareas que consideramos básicas en un diseño, como centrar verticalmente un elemento secundario en relación con un elemento principal o hacer que los elementos secundarios ocupen la misma cantidad de espacio, o que las columnas tengan el mismo tamaño independientemente de la cantidad de contenido interno, fueron imposibles. o muy difícil de manejar con floats o position, al menos de forma práctica y flexible. La herramienta Flexbox (de Flexible Box) fue creada para hacer estas tareas más sencillas y funcionales: los secundarios de un elemento con Flexbox se pueden posicionar en cualquier dirección y pueden tener dimensiones flexibles para adaptarse.

Elementos

Flexbox es un módulo completo y no una propiedad única; algunos de ellos deben declararse en el contenedor (el elemento principal, que llamamos de flex container), mientras que otros deben declararse en los elementos secundarios (el flex ítems). Si el diseño "estándar" se basa en las direcciones block e inline, el diseño Flex se basa en direcciones de "flex flow". A continuación se muestra un diagrama de la especificación, que explica la idea central detrás del diseño Flex.

Diagrama explicando a terminologia do Flex. A dimensão no sentido do eixo principal é chamada de tamanho principal, e a outra direção é chamada de transversal. Estes tamanhos, tanto o principal como o transversa, têm uma borda inicial e uma borda final

Los ítems se distribuirán en el diseño siguiendo el eje principal o transversal.

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

  • 101 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Descuento de lanzamiento de 30%

Trimestral

Descuento de lanzamiento de 30%
  • 101 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
US$19,90
un pago de US$29,90 US$19,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Semestral

Descuento de lanzamiento de 30%
  • 101 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
US$33,90
un pago de US$49,90 US$33,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Acceso a todos los cursos
Estudia las 24 horas, dónde y cuándo quieras
Nuevos cursos cada semana