0. display: flex

item1
item2
item3

1. flex-direction: row

item1
item2
item3

2. flex-direction: row-reverse

item1
item2
item3

3. flex-direction: column

item1
item2
item3

4. flex-direction: column-revers

item1
item2
item3

5. justify-content: flex-start

item1
item2
item3

6. justify-content: center

item1
item2
item3

7. justify-content: flex-end

item1
item2
item3

8. justify-content: space-between

item1
item2
item3

9. justify-content: space-around

item1
item2
item3

10. justify-content: space-evenly

item1
item2
item3

11. align-items: stretch

item1
item2
item3

12. align-items: flex-start

item1
item2
item3

13. align-items: center

item1
item2
item3

14. align-items: flex-end

item1
item2
item3

15. align-items: center, justify-content: center

item1
item2
item3

16. flex-wrap: nowrap 折り返しなし

item1
item2
item3

17. flex-wrap: wrap 1アイテム400px、折り返し指示

item1
item2
item3

18. order

item1
item2
item3

19. flex-basis

item1
item2
item3

20. flex-grow

item1
item2
item3

21. flex-grow 均等配置

item1
item2
item3

22. flex-grow 配分を変える

item1
item2
item3

23. flex-shrink 初期値は1

item1
item2
item3

24. flex-shrink 他の幅も調整する

item1
item2
item3