css: flex

1. flex-direction: row

1

2

3

4

5

2. flex-direction: row-reverse

1

2

3

4

5

3. flex-direction: column

1

2

3

4

5

4. flex-direction: column-reverse

1

2

3

4

5

5. flex-wrap: nowrap

1

2

3

4

5

5

5

5

5

5

5

5

5

6. flex-wrap: wrap

1

2

3

4

5

5

5

5

5

5

5

5

5

7. flex-wrap: wrap-reverse

1

2

3

4

5

5

5

5

5

5

5

5

5

8. justify-content: flex-start

1

2

3

4

5

9. justify-content: flex-end

1

2

3

4

5

10. justify-content: center

1

2

3

4

5

11. justify-content: space-between

1

2

3

4

5

12. justify-content: space-around

1

2

3

4

5

13. justify-content: space-evenly

1

2

3

4

5

14. align-items: flex-start

1

2

3

4

5

15. align-items: flex-end

1

2

3

4

5

16. align-items: center

1

2

3

4

5

17. align-items: baseline

1

2

3

4

5

18. align-items: stretch

1

2

3

4

5

19. align-content: flex-start

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

20. align-content: flex-end

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

21. align-content: center

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

22. align-content: space-between

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

23. align-content: space-around

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

24. align-content: stretch

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

1. order (项目5的order值为 -1)

1

2

3

4

5

2. flex-grow (项目3的值为3)

1

2

3

4

5

3. flex-shrink (项目3的值为0)

1

2

3

4

5

4. align-self: auto

1

2

3

4

5

5. align-self: flex-start

1

2

3

4

5

6. align-self: flex-end

1

2

3

4

5

7. align-self: center

1

2

3

4

5

8. align-self: baseline

1

2

3

4

5