Flex‐box - cristhian-cz/doc_development GitHub Wiki

1)nivel 1 En el primer nivel usamos el display:flex; para indicar que estamos usando el flex-box en cs con la propiedad justify-content indicamos que alinearemos el contenido del elemento horizontalmente lo que vamos a mover y con el atributo flex-end le indicamos la posición a la que lo vamos a mover y en este caso se movería al final de la caja.

2)nivel 2 En este nivel utilizamos el atributo center de la propiedad justify-content para mover las dos ranitas al centro horizontalmente .

3)Nivel 3 En este nivel usamos el atributo space-around para separar las ranitas dependiendo de la separacion que tenían entre ellos horizontalmente.

4)nivel 4 En este nivel usamos el atributo space-between para separar las ranitas en el distancia entre ellas en las que se puedan distribuir horizontalmente.

5)nivel 5 En este nivel cambiamos la propiedad y usamos align-items que sirve para alinear los elementos verticalmente y usamos el atributo flex-end que nos indica que las ubicaremos en la parte inferior de la caja

6)nivel 6 En el nivel 6 usamos la combinación de las dos propiedades justify-content:center y align-items:center para desplazar la rana horizontalmente al centro y luego verticalmente al centro para que se pueda ubicar en el centro de la caja.

7)nivel 7 Aquí usamos la combinación de aling-items:flex-end para ubicar las ranas en la parte inferior verticalmente y luego usamos justify-content:space-around para ubicarlas un espacio con la misma separación entre las ranitas.

8)nivel 8 Aquí usamos flex-direction:row-reverse; para darle una dirección a los elementos y usamos el atributo row-reverse para ubicalas en dirección opuesta al texto o de manera invertida.

9)nivel 9 En este nivel usamos flex-direction:column; para darle una dirección de columna y los ubicamos de arriba hacia abajo.

10)nivel 10 En este nivel usamos flex-direction:row-reverse para invertir las ranas justify-content:flex-end para que se puedan alinear horizontalmente y queden posicionadas de manera inversa inicialmente.

11)nivel 11 Usamos flex-direction:column para ubicar los elemento verticalmente y justify-content:flex-end; para agregarlos a la parte final de la columna

12)nivel 12 En este nivel usamos flex-direction:column-reverse para invertir los elementos posicionándolos en la columna y justify-content:space-between para repartir el espacio entre ellos que puedan ocupar verticalmente.

13)nivel 13 Usamos flex-direction:row-reverse para invertir los valores luego justify-content:center para centrar los elementos y luego align-items:flex-end para ubicarlos en la parte inferior de la caja.

14)nivel 14 En este nivel usamos order:2 para ubicar la rana amarilla en la posición 2 del array

15)nivel 15 Usamos order:-1 para darle la posición inicial a la rana roja

16)nivel 16 Usamos align-self:flex-end para enviar al final rana amarilla

17)nivel 17 Usamos align-self:flex-end para enviar a la parte final del contenedor y el order:1 para correr las ranitas amarillas en el array a la posición 1

18)nivel 18 Usamos flex-wrap:wrap para poder distribuir y las que quedan amontodanas en la posición horizontal las organiza un nivel mas abajo.

19)nivel 19 Usamos flex-wrap:wrap para poder organizar los espacios de las ranas y queden bien distribuidas un nivel mas abajo si están amontonadas y luego flex-direction:column para organizarlas en columnas

20)nivel 20 Usamos esta propiedad con el atributo flex-flow:wrap column que nos simplifica el código y podemos tener el mismo efecto que el nivel 19.

21)nivel 21 Usamos align-content:flex-start para organizar las ranas todas en la parte inicial superior y que no queden tan separadas

22)nivel 22 Usamos align-content:flex-end para organizar en la parte inferior las ranas

23)nivel 23 Usamos flex-direction:column-reverse para invertir las ranas y coincidan los colores luego align-content:center para centrar las ranas.

24)nivel 24 Usamos flex-flow:column-reverse wrap-reverse para invertir las ranas y la roja quede en la parte inferior el wrap-reverse para organizarlas y que queden las amarillas al lado izquierdo y justify-content:center para centrar las ranas amarillas y align-content:space-between; para que queden en el extremo izquierdo las ranas amarillas.