Contenedor Flex

Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor display como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Como con todas las propiedades de CSS, se definen algunos valores iniciales, así que cuando creemos un contenedor flex todos los ítems flex contenidos se comportarán de la siguiente manera.

• Los ítems se despliegan sobre una fila (la propiedad flex-direction por defecto es row).


• Los ítems empiezan desde el margen inicial sobre el eje principal.


• Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.


• Los ítems se ajustarán para llenar el tamaño del eje cruzado.


• La propiedad flex-basis es definida como auto.


• La propiedad flex-wrap es definida como nowrap.

El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen. Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.

Se puede ver en el ejercicio en vivo de abajo cómo luce. Intente editar el ítem o añadir ítems adicionales para así probar el comportamiento inicial de flexbox.