Entender Flexbox

Propiedades del contenedor flex

flex-direction ( una propiedad del contenedor flex )

1

2

3

4

5

flex-wrap ( una propiedad del contenedor flex )

1

2

3

4

5

align-items ( una propiedad del contenedor flex )

1

2

3

4

5

justify-content ( una propiedad del contenedor flex )

1

2

3

4

5

En Google Chrome y Opera: problemas al cambiar dinamicamente entre justify-content:space-between y justify-content:space-around

align-content ( una propiedad del contenedor flex )

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

Propiedades de los ítems flex

align-self ( una propiedad de los items flex )

1

2

3

4

5

flex-grow ( una propiedad de los items flex )

1

2

3

4

5

flex-shrink ( una propiedad de los items flex )

1

2

3

4

5

flex ( una propiedad de los items flex )

.item { flex: flex-grow [flex-shrink] [flex-basis]; }

elemento 1elemento 2

1

2

order ( una propiedad de los items flex )

1

2

3

4

5