Chapter 1: Flexbox, part 1

28 tasks , 3 challenges and 1 summary  

We will consider the basics of flexboxes, which provide a new way of creating “flexible” layouts. First, we will learn how to establish the direction of flow of flex container axes and to align and overflow flex items with the kitties, and then we will learn how to apply a flexbox simply and easily within real interfaces.

Start
1. The display: flex property, flex item Task
2. The flex-direction property, main axis Task
3. The flexbox cross axis Task
4. The justify-content property, alignment along the main axis Task
5. The justify-content property: flex-start | flex-end Task
6. The justify-content property: space-between | space-around Task
7. The align-items property, alignment along the cross axis Task
8. The align-items property: flex-start | flex-end Task
9. The align-items: baseline property Task
10. The align-self property, or selfish alignment Task
11. The align-self: baseline property Task
12. Test: Creating a simple palette Challenge
13. The flex-wrap property, overflow of flex items Task
14. The flex-wrap property, reverse overflow Task
15. The align-content property, alignment of flex container lines Task
16. The align-content property: stretch and align-items Task
17. The align-content property: non-stretch and align-items Task
18. The align-content property, remaining values Task
19. The order property, the sequence number of the flex item Task
20. Test: Creating a more complicated palette Challenge
21. Perfect centering by assigning margin: auto to the flex container Task
22. Perfect centering, flex alignment Task
23. The adaptive horizontal menu, part 1 Task
24. The adaptive horizontal menu, part 2 Task
25. The adaptive horizontal menu, part 3 Task
26. The vertical row of icons Task
27. The vertical row of icons, part 2 Task
28. The vertical row of icons, part 3 Task
29. Ordering elements with CSS Task
30. Vertically aligning blocks using a flexbox Task
31. Test: Complex palettes Challenge
32. Summary of “Flexbox, Part 1” Summary