3. Alineación en Flexbox
- Alineacion de items
-
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyAlinea los items en el eje principal (main axis)
-
align-items: flex-start | flex-end | center | baseline | stretchAlinea los items en el eje secundario (cross axis) dentro de la linea
- Alineación de lineas
-
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretchAlinea las lineas respecto al container
Ejemplo 1
En este ejemplo ponemos el flex-flow:wrap (en el padre) y empezamos a jugar con
justify-content, el cual por defecto tiene el valor de flex-start
1
2
3
4
5
6
7
8
9
justify-content: flex-start
1
2
3
4
5
6
7
8
9
justify-content: flex-end
1
2
3
4
5
6
7
8
9
justify-content: center
1
2
3
4
5
6
7
8
9
justify-content: space-around esto genera un espacio
alrededor de los items (como si tuviesen un margin left y right iguales que lo
calcula el navegador en base al espacio vacío que hay)
1
2
3
4
5
6
7
8
9
justify-content: space-between esto genera un espacio entre
los items (entre unos y otros, no como space-around que lo hace alrededor de los
items)
*el margin right de elementos es porque ahora mismo tienen un margin de 1rem