← Flexbox basics lesson New set →

CSS Worksheet: Flexbox Basics

HTML and CSS lesson 18: Flexbox basics · Set 470 · 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.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
  2. 2.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 350px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 50px wide (no margins).
  3. 3.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) flex-start (d) center
  4. 4.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
  5. 5.What does justify-content: flex-start 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
  6. 6.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
  7. 7.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
  8. 8.💪 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 50px wide (no margins).
  9. 9.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 120px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
  10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 380px;
      justify-content: center;
    }
    Inside are 3 boxes, each 80px wide (no margins).
  11. 11.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
  12. 12.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
  13. 13.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
  14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 330px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).
  15. 15.What does justify-content: flex-end do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
  16. 16.💪 Which flexbox property sets space between boxes? (a) display: flex (b) align-items (c) gap (d) flex-direction
  17. 17.💪 Which flexbox property turns on flexbox? (a) align-items (b) display: flex (c) gap (d) justify-content
  18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
  19. 19.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 460px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
  20. 20.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 290px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
  21. 21.💪 Which flexbox property lines boxes up across? (a) align-items (b) flex-direction (c) display: flex (d) justify-content
  22. 22.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) center (d) flex-end
  23. 23.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 140px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
  24. 24.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 120px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 40px wide (no margins).
  25. 25.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
  26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
  27. 27.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
  28. 28.💪 Which flexbox property picks row or column? (a) display: flex (b) gap (c) flex-direction (d) justify-content
  29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
  30. 30.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) center (c) flex-end (d) flex-start
  31. 31.💪 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).
  32. 32.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) gap (c) justify-content (d) display: flex
  33. 33.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 400px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
  34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
  35. 35.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
  36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 100px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
  37. 37.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
  38. 38.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) flex-end (c) space-between (d) center
  39. 39.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
  40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).

Answer key

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

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