HTML Academy
  • HTML Academy
  • Courses
  • Tutorials
  • Courses
  • Tutorials
  • Sign up
  • Log in
  • Home
  • Interactive courses
  • Creating a layout
  1. Flexbox, part 1 0/31
  2. Flexbox, part 2 0/28
  3. Introduction to Grid Layout 0/30

Chapter 2: Flexbox, part 2

25 tasks, 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.

Start
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

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

VISAMastercard

Log in

or

Forgot your password?

Sign up

Sign up

or
Log in

Restore access

Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

Forgot to connect your email to the profile? Email us and we’ll help.

We are using cookies to gather information which will help you use our website most effectively. You can read about this here or disable this feature if you want. By continuing to browse the site, you agree to our use of cookies.