CSS Flexbox: Introducción
Si necesitas organizar elementos en una sola fila o en una sola columna, es posible que prefieras utilizar Flexbox en lugar de Grid.
Flexbox es uno de los dos sistemas de diseño modernos, junto con CSS Grid.
Flexbox es un modelo de diseño unidimensional.
Controlará el diseño basado en una fila o en una columna, pero no filas/columnas juntas al mismo tiempo como lo hace Grid.
El objetivo principal de flexbox es permitir que los elementos ocupen todo el espacio disponible proporcionado por su contenedor, según algunas reglas que establezcas.
Un diseño de flexbox se aplica a un contenedor configurando la propiedad display a flex:
.container {
display: flex;
}
Una vez que agregas esto a un elemento, el contenido dentro del elemento se alineará utilizando flexbox.
Una vez que lo haces, puedes usar otras propiedades de flexbox para establecer el diseño.
Algunas de esas propiedades se aplican al contenedor.
Otras propiedades se aplican a cada elemento individual dentro del contenedor.
Propiedades aplicadas al contenedor Propiedades aplicadas a los elementos dentro del contenedor
flex-direction order justify-content align-self align-items flex-grow align-content flex-shrink flex-wrap flex-basis flex-flow flex