Curso de CSS desde cero [completo]Logo de Github
Ver el curso en GitHub
¿Quieres el libro del curso?
Artículos relacionados:

¿Qué es Flexbox CSS y para qué sirve?

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

¿Qué es Flexbox?

Es un sistema de elementos flexibles. Donde los elementos HTML se adaptan y colocan automáticamente siendo mucho más fácil personalizar los diseños.

Está pensado para diseños en una sóla dimensión, es decir, o filas o columnas.

Antes de que existiese el Flexbox había otros modos de hacer layouts:

  • Block
  • Inline
  • Table
  • Position

El Flexbox hace que se más fácil crear estructuras de layout responsive, sin usar posicionamiento o flotantes.

Flex container y Flex items

Para que flexbox funcione necesitamos tener un contenedor flex (flex container), el cual se crea con la propiedad de CSS display:flex; Este elemento padre debe contener a los elementos que serán las cajas flexibles, llamos elementos flex (o flex item).

Ejemplo de flexbox

See the Pen CSS | Flexbox by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats