← Flexbox basics lesson New set →

CSS Worksheet: Flexbox Basics

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

Answer key

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

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