Chapter 2: Flexbox, part 2

25 tasks and 3 challenges

We will learn how to control the sizes and margins of flex items and how growth and shrinkage factors work, and we will gain practical experience creating "flexible" layouts and interface elements.

1. Flex items and the block model Task

2. Features of the margin property Task

3. Alignment and margins Task

4. The flow direction of the main axis and margins Task

5. The initial main size of flex item, flex-basis Task

6. Test: Cubism Challenge

7. The item growth factor, flex-grow Task

8. Growing items proportionally Task

9. Calculating the total size with flex-grow Task

10. The item shrinkage factor, flex-shrink Task

11. Shrinking items proportionally Task

12. Calculating the total size with flex-shrink Task

13. flex-shrink and min-width Task

14. Test: Mastering factors Challenge

15. The flex shorthand property Task

16. Multi-line flex containers and flex-shrink Task

17. Multi-line flex containers and flex-grow Task

18. flex-basis: 100% and flex-wrap Task

19. The heading with description in flexboxes Task

20. Heading with description, part 2 Task

21. Flexible menu with overflowing content Task

22. Flexible menu with overflow, part 2 Task

23. Input fields with dynamic width Task

24. The course card Task

25. Course card, part 2 Task

26. Course card, part 3 Task

27. So many cards Task

28. Test: Flexible flows Challenge