← Flexbox basics lesson New set →

CSS Worksheet: Flexbox Basics

HTML and CSS lesson 18: Flexbox basics · Set 837 · 40 questions
TalentJR

Code tip (Find the free space): Free space = container width − number of boxes × box width. flex-start: all free space after the last box; flex-end: all before the first box; center: half on each side. space-between: free space ÷ (boxes − 1) between each pair, none at the ends.

NameDateTime takenScore ___ / 40
  1. 1.💪 Which flexbox property turns on flexbox? (a) align-items (b) flex-direction (c) justify-content (d) display: flex
  2. 2.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
  3. 3.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
  4. 4.What does justify-content: center do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
  5. 5.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) display: flex (c) gap (d) justify-content
  6. 6.💪 Which flexbox property picks row or column? (a) align-items (b) gap (c) flex-direction (d) display: flex
  7. 7.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 200px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).
  8. 8.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
  9. 9.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
  10. 10.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) center (c) flex-start (d) space-between
  11. 11.What does justify-content: space-between do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
  12. 12.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
  13. 13.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) flex-end (d) center
  14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
  15. 15.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-start (c) center (d) flex-end
  16. 16.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 460px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
  17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 460px;
      justify-content: center;
    }
    Inside are 3 boxes, each 100px wide (no margins).
  18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
  19. 19.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
  20. 20.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) flex-end (d) center
  21. 21.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
  22. 22.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
  23. 23.💪 Which flexbox property sets space between boxes? (a) gap (b) flex-direction (c) align-items (d) justify-content
  24. 24.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 420px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
  25. 25.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
  26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
  27. 27.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 210px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
  28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
  29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
  30. 30.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
  31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 230px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
  32. 32.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
  33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
  34. 34.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 180px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
  35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
  36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 3 boxes, each 60px wide (no margins).
  37. 37.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 370px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 100px wide (no margins).
  38. 38.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 220px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).
  39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
  40. 40.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 440px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).

Answer key

  1. display: flex
  2. 60
  3. 70
  4. puts boxes in the middle
  5. justify-content
  6. flex-direction
  7. 10
  8. 40
  9. 80
  10. center
  11. equal gaps, none at ends
  12. packs boxes at the start
  13. flex-end
  14. 80
  15. flex-start
  16. 60
  17. 80
  18. 40
  19. packs boxes at the end
  20. space-between
  21. 20
  22. 10
  23. gap
  24. 10
  25. 20
  26. 30
  27. 50
  28. 50
  29. 30
  30. 50
  31. 40
  32. 70
  33. 20
  34. 20
  35. 60
  36. 30
  37. 70
  38. 20
  39. 20
  40. 40

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids