Ahora vamos a trabajar de modo en que le demos la propiedad al item y no al contenedor como veniamos haciendolo.
Aqui vemos como se comporta las cajas margin dentro del flex.
Los flex containers son las cajas azules.
Como vemos top y bottom entran en un conflicto y deciden la derecha como predeterminado y el centro ya que no sabe si decidir arriba o bajo.
Hace lo mismo que la anterior.
La propiedad flex agrupa a grow, shrink y basis como la propiedad flex.
.flex{ flex: 1 3 500px;}
Cuando estan todos en su maximo tamaño el flex tiene su tamaño de 500px
el unico en ocupar todo el espacio disponible con el grow es el flex y ocupara todo el espacio disponible mayor a los 500px de ser porsible
Cuando halla poco espacio el flex se reduce mas que los demas para darle a los otros su espacio con shrink.
Flex grow agarra el espacio sobrante y lo reparte en las cajas que quedan de esta forma.
Las podemos ensanchar todo lo que queramos pero lo minimo va a ser 120 px ya que lo establecimos en min-width.
Pero si queremos darle todo el espacio disponible a una sola caja por ejemplo a la verde le ponemos el flex-grow solo a la verde.
Se queremos darle el grow a dos cajas lo podemos hacer en este caso se lo daremos a la naranja y a la verde.
Si queremos darle a un grow un tamaño mas grande que el otro cambiamos los valores del grow.
es lo mismo que el width la diferencia es que si se encuentra ubicada arriba o abajo indirectamente siempre le va a dar mas prioridad al flex-basis.
Esta instruccion lo que hace es darle 300px primero a los elementos que no tengan el shrink es decir entre mas pequeña sea la pantalla en este caso la caja que tenga el flex-shrink tendra menos espacio que las demas.
Primero le colocamos un width de 300px a cada caja.
Para que la de flex-shirink no seda nada le damos el valor de 0.
Es un item del flexbox es parecido al z-index, pero en el eje en el que punta el main axis.
Ordenamos de modo en que el azul sea el primer elemento, el naranja sea el tercer elemento y el verde sea el segundo elemento, utilizando flex-column.
Ahora vamos a utilizar el column-reverse
De hecho le podemos poner a order 30 60 los valores que queramos, ira los mayores de ultimo lugar y los menores de primer lugar