Alineación y control de flujo


Tenemos dos tipos de alineación:

1:La alineacion en general de todos los items algo que se aplica al contenedor, la alinacion de filas y columnas que se aplica al contenedor.
2:La alineacion particular por elemento individual.
La alineacion es dentro de cada celda y no alineacion total del flex container.
Cada celda seria un flex container.
Propiedades del grid-container:
justify-items (alinea horizontalmente)
aligh-items (alinea verticalmente)

Vamos a alinear horizontalmente las grillas con justify-items.

Justify-items

flex-start o start

1
2
3
4
5
6
7
8
9

flex-center o center

1
2
3
4
5
6
7
8
9

flex-end o end

1
2
3
4
5
6
7
8
9

align-items

flex-start o start

1
2
3
4
5
6
7
8
9

flex-center o center

1
2
3
4
5
6
7
8
9

flex-end o end

1
2
3
4
5
6
7
8
9

Combinamos justify-items: center
y align-items:center

1
2
3
4
5
6
7
8
9

justify-content

justify-content (alinea horizontalmente todas las grillas)

flex-start

1
2
3
4
5
6
7
8
9

flex-center

1
2
3
4
5
6
7
8
9

flex-end

1
2
3
4
5
6
7
8
9

align-content

aligh-content (alinea verticalmente)

flex-start

1
2
3
4
5
6
7
8
9

flex-center

1
2
3
4
5
6
7
8
9

flex-end

1
2
3
4
5
6
7
8
9

Algunas convinaciones de justify content y align content

Convinaciones de justify content
y align content con center

1
2
3
4
5
6
7
8
9

Convinaciones de justify content
y align content con start

1
2
3
4
5
6
7
8
9

Convinaciones de justify content
y align content con end

1
2
3
4
5
6
7
8
9

Convinaciones de justify content center
y align content con end

1
2
3
4
5
6
7
8
9

Convinaciones de justify content end
y align content con start

1
2
3
4
5
6
7
8
9

Algunas convinaciones de justify items y align items con justify content y align content

Convinaciones de justify items, content
y align items, content con center

1
2
3
4
5
6
7
8
9

Convinaciones de justify items, content start
y align items, content con end

1
2
3
4
5
6
7
8
9

Convinaciones de justify items, content end
y align items, content con start

1
2
3
4
5
6
7
8
9

space en content

justify-content y align-content tienen las mismas propiedades que flex:
*space-around
*space-between
*space-evenly

justify-content space-around

1
2
3
4
5
6
7
8
9

justify-content space-between

1
2
3
4
5
6
7
8
9

justify-content space-evenly

1
2
3
4
5
6
7
8
9

align-content space-around

1
2
3
4
5
6
7
8
9

align-content space-between

1
2
3
4
5
6
7
8
9

align-content space-evenly

1
2
3
4
5
6
7
8
9

Aplicado al grid-item

Dentro de las propiedades aplicadas al grid-item encontramos.
*align-self
*justify-self.

align-self

1
2
3
4
5
6
7
8
9