APRENDE CSS DE FORMA VISUAL

Align-items:Se aplica cuando hay una sola línea de elementos

La propiedad align-items establece la alineación de los elementos flexibles en el eje cruzado (vertical en el caso de row, horizontal en el caso de column). Puede tomar los siguientes valores: flex-start, flex-end, center, baseline, stretch

• flex-start: Los elementos se alinean al inicio del eje cruzado.
• flex-end: Los elementos se alinean al final del eje cruzado.
• center: Los elementos se alinean al centro del eje cruzado.
• baseline: Los elementos se alinean según su línea de base.
• stretch: Los elementos se estiran para llenar el eje cruzado.

STRETCH (valor por defecto):
.divpadre1 {border: 5px solid black;background-color: lightcoral;height: 150px;display: flex; flex-wrap: wrap; justify-content: space-evenly;align-items: stretch;}
.hijo1 { display:flex ;justify-content: center; width:200px; background-color: rgb(138, 66, 183); margin: 5px;}

FLEX-START:
.divpadre2 {border: 5px solid black;background-color: lightcoral;height: 150px; display: flex; flex-wrap: wrap; justify-content: space-evenly;align-items: flex-start;}
.hijo2 {display:flex ;justify-content: center; width:200px; background-color: rgb(138, 66, 183); margin: 5px;}

1

2

3

4

5

CENTER:
.divpadre3 {border: 5px solid black;background-color: lightcoral;height: 150px; display: flex; flex-wrap: wrap; justify-content: space-evenly;align-items: center;}
.hijo3 {display:flex ;justify-content: center; width:200px; background-color: rgb(138, 66, 183); margin: 5px;}

1

2

3

4

5

FLEX-END:
.divpadre4 {border: 5px solid black;background-color: lightcoral;height: 150px; display: flex; flex-wrap: wrap; justify-content: space-evenly;align-items: flex-end;}
.hijo4 {display:flex ;justify-content: center; width:200px; background-color: rgb(138, 66, 183); margin: 5px;}

1

2

3

4

5

BASELINE+WRAP REVERSE:
.divpadre5 {border: 5px solid black;background-color: lightcoral;height: 150px; display: flex; flex-wrap: wrap-reverse; justify-content:space-evenly;align-items:baseline;}
.hijo5 { display:flex ;justify-content: center; width:220px; background-color: rgb(138, 66, 183); margin: 5px;}

1

2

3

4

5

6

7

8

9

10

11

Align-content: Se aplica cuando hay varias líneas de elementos

La propiedad align-content define cómo se distribuyen las líneas de flexbox cuando hay espacio disponible en el eje principal.

• flex-start: Las líneas se agrupan al inicio del contenedor.
• flex-end: Las líneas se agrupan al final del contenedor.
• center: Las líneas se agrupan en el centro del contenedor.
• baseline: Los elementos se alinean según su línea de base.
• stretch: Las líneas se estiran para llenar el espacio disponible.

Flex-start:
.divpadre6 {border: 5px solid black;background-color: lightcoral;height: 20vh; display: flex; flex-wrap: wrap; justify-content:space-evenly;align-content: flex-start;}
.hijo6 { display:flex ;justify-content: center; width:12vw; background-color: rgb(138, 66, 183); margin: 5px;}

1

2

3

4

5

6

7

8

9

10

11

Flex-end:
.divpadre7 {border: 5px solid black;background-color: lightcoral;height: 20vh; display: flex; flex-wrap: wrap; justify-content:space-evenly;align-content: flex-end;}
.hijo7 { display:flex ;justify-content: center; width:12vw; background-color: rgb(138, 66, 183); margin: 5px;}

1

2

3

4

5

6

7

8

9

10

11

Baseline + Wrap reverse:
.divpadre8 {border: 5px solid black;background-color: lightcoral;height: 20vh; display: flex; flex-wrap: wrap-reverse; justify-content:space-evenly;align-content: baseline;}
.hijo8 { display:flex ;justify-content: center; width:12vw; background-color: rgb(138, 66, 183); margin: 5px;}

1

2

3

4

5

6

7

8

9

10

11