HTML Academy
So many cards
Flexbox, part 228/28
Back to the list of tasks
  • 1. Flex items and the block model
  • 2. Features of the margin property
  • 3. Alignment and margins
  • 4. The flow direction of the main axis and margins
  • 5. The initial main size of flex item, flex-basis
  • 6. Test: Cubism
  • 7. The item growth factor, flex-grow
  • 8. Growing items proportionally
  • 9. Calculating the total size with flex-grow
  • 10. The item shrinkage factor, flex-shrink
  • 11. Shrinking items proportionally
  • 12. Calculating the total size with flex-shrink
  • 13. flex-shrink and min-width
  • 14. Test: Mastering factors
  • 15. The flex shorthand property
  • 16. Multi-line flex containers and flex-shrink
  • 17. Multi-line flex containers and flex-grow
  • 18. flex-basis: 100% and flex-wrap
  • 19. The heading with description in flexboxes
  • 20. Heading with description, part 2
  • 21. Flexible menu with overflowing content
  • 22. Flexible menu with overflow, part 2
  • 23. Input fields with dynamic width
  • 24. The course card
  • 25. Course card, part 2
  • 26. Course card, part 3
  • 27. So many cards
  • 28. Test: Flexible flows
List of tasks
  • Sign up
  • Log in

Register to take up challenges

Registration will only take a minute and let you save your study progress. You can register with your email and password or login via social networks.

or
Log in and continue
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test: Flexible flows</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="exam"> <div class="brick-layout"> <div class="brick color-aqua"></div> <div class="brick color-aqua"></div> <div class="brick color-aqua"></div> <div class="brick color-yellow"></div> <div class="brick color-yellow"></div> <div class="brick color-yellow"></div> <div class="brick color-fuchsia"></div> <div class="brick color-fuchsia"></div> </div> </body> </html>
CSS
.brick-layout { width: 400px; padding: 5px; box-sizing: content-box; } .brick { min-height: 80px; min-width: 50px; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

100%
  • Goal
  • Result
  • Overlay
  • Differences
  • ?

Press Compare to send your code for review.

Failed to load the goal. Try later.

Goal — the interface you need to get.

Result — the way the server sees your code. Can differ from what you see in the mini-browser. The comparison is made between this result and the goal.

Overlay — semi-transparent result is shown above the goal.

Differences — the map of differences between the goal and the result.

Done 0%.
The code has been changed

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

VISAMastercard