FLEXBOX FROGGY

URL: http://flexboxfroggy.com/.

justify-content

Bienvenido a Flexbox Froggy, un juego donde ayudarás a Froggy y a sus amigos escribiendo código CSS. Guía a esta rana hacia la hoja de lirio en la derecha, usando la propiedad justify-content, la cual alinea elementos horizontalmente y acepta los siguientes valores:

• flex-start: Alinea elementos al lado izquierdo del contenedor.
• flex-end: Alinea elementos al lado derecho del contenedor.
• center: Alinea elementos en el centro del contenedor.
• space-between: Muestra elementos con la misma distancia entre ellos.
• space-around: Muestra elementos con la misma separación alrededor de ellos.

Por ejemplo, justify-content: flex-end; moverá la rana a la derecha (siempre deberemos usar display: flex;).

#pond {
  display: flex;
  justify-content: flex-end;
}

Para centrar elementos:

#pond {
  display: flex;
  justify-content: center;
}

Para espacio alrededor:

#pond {
  display: flex;
  justify-content: space-around;
}

align-items

Ahora usa align-items para ayudar a las ranas a llegar al fondo del estanque. Esta propiedad CSS alinea elementos verticalmente y acepta los siguientes valores:

• flex-start: Alinea elementos a la parte superior del contenedor.
• flex-end: Alinea elementos a la parte inferior del contenedor.
• center: Alinea elementos en el centro (verticalmente hablando) del contenedor.
• baseline: Muestra elementos en la línea base del contenedor
• stretch: Elementos se estiran para ajustarse al contenedor.

#pond {
  display: flex;
  align-items: flex-end;
}

Mueve la rana al centro del estanque, usando una combinación de justify-content y `align-items.

#pond {
  display: flex;
  justify-content: center;
  align-items: center;
}

flex-direction

Las ranas necesitan ponerse en el mismo orden que sus hojas de lirio usando flex-direction. Esta propiedad CSS define la dirección de los elementos en el contenedor, y acepta los siguientes valores:

• row: Elementos son colocados en la misma dirección del texto.
• row-reverse: Elementos son colocados en la dirección opuesta al texto.
• column: Elementos se colocan de arriba hacia abajo.
• column-reverse: Elementos se colocan de abajo hacia arriba.

order

A veces, invertir el orden de una fila o columna de un contenedor no es suficiente. En esos casos, nosotros podemos aplicar la propiedad order a elementos individuales. Por defecto, los elementos tienen un valor 0, pero nosotros podemos usar esta propiedad para establecerlo a un número entero positivo o negativo.

Usa la propiedad order para reordenar las ranas de acuerdo a sus hojas de lirio.

#pond {
  display: flex;
}

.yellow {
  order: 1;
}

align-self

Otra propiedad que puedes aplicar a elementos individuales es align-self. Esta propiedad acepta los mismos valores de align-items y sus valores son usados para un elemento específico.

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  align-self: flex-end;
}

flex-wrap

¡Oh, no! Todas las ranas están apretadas en una sola fila de hojas de lirio. Manos a la obra, vamos a distribuirlas correctamente usando la propiedad flex-wrap, la cual acepta los siguientes valores:

• nowrap: Cada elemento se ajusta en una sola línea.
• wrap: los elementos se envuelven alrededor de líneas adicionales.
• wrap-reverse: Los elementos se envuelven alrededor de líneas adicionales en reversa.

#pond {
  display: flex;
  flex-wrap: wrap;
}

flex-flow

Las dos propiedades flex-direction y flex-wrap son usadas a menudo en conjunto con la propiedad abreviada flex-flow, la cual fue creada para combinarlas. Esta propiedad abreviada, acepta un valor de cada una separada por un espacio.

Por ejemplo, puedes usar flex-flow para establecer filas y envolverlas.

#pond {
  display: flex;
  flex-flow: column wrap;
}

align-content

Las ranas están repartidas por todo el estanque, pero las hojas de lirio están agrupadas en la parte superior. Puedes usar align-content para establecer como múltiples líneas están separadas una de otra. Esta propiedad acepta los siguientes valores:

• flex-start: Las líneas se posicionan en la parte superior del contenedor.
• flex-end: Las líneas se posicionan en la parte inferior del contenedor.
• center: Las líneas se posicionan en el centro (verticalmente hablando) del contenedor.
• space-between: Las líneas se muestran con la misma distancia entre ellas.
• space-around: Las líneas se muestran con la misma separación alrededor de ellas.
• stretch: Las líneas se estiran para ajustarse al contenedor.

Esto puede ser confuso, pero align-content determina el espacio entre las líneas, mientras que align-items determina como los elementos en su conjunto están alineados dentro del contenedor. Cuando hay solo una línea, align-content no tiene efecto.

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}