Flex-Item
Ya hablamos de FlexBox y de las propiedades que se pueden usar en nuestro flex-container; ahora solo nos falta saber como afecta flex a nuestros flex-items.
Las propiedades que podemos usar en nuestros flex-items son:
Order
Con esta propiedad controlamos el orden de los flex-items que están dentro del flex-container. Por defecto aparecen en el orden que indica el código fuente. El valor por defecto es 0.
flex-direction: row;
flex-direction: row-reverse;
Flew-grow
Esta propiedad especifica el factor que determina hasta que punto un flex-item crecerá en relación con el resto de los flex-items. El valor por defecto es 0. Si los flex-item tienen el mismo valor para flex-grow, todos van a tener el mismo tamaño, según el flex-container.
Al definir que en el segundo flex-item la propiedad flex-grow va a tener un valor de dos, este va a tomar un ancho que equivale a la suma de dos elementos.
Flex-shrink
Esta propiedad da la capacidad de encoger los flex-items si es necesario. Por defecto, todos lo flex-items se pueden reducir, pero si les ponemos el valor de 0 no se van a encoger, si no, que van a mantener el tamaño original. El valor por defecto es 1.
Flex-basis
Esta propiedad tiene los mismos valores que las propiedades width y height y especifica el tamaño principal del flex-item, distribuyéndose de acuerdo con los factores flex.
Flex
Esta propiedad solo es la abreviatura de flex-grow, flex-shrink y flex-basis. Valor por defecto: 0 1 auto;
Align-self
Esta propiedad permite sobreescribir la alineación por defecto (o la especificada por align-items) para flex-items individualmente.
Gracias a el conjunto de todas estas propiedades que acabas de aprender, puedes crear sitios responsivos de manera muy fácil, recuerda que la practica hace al maestro.
Aprende más sobre FlexBox y la mejor forma de iniciarte en HTML y CSS visitando la página de MUKTEK.
