← Flexbox basics lesson New set →

CSS Worksheet: Flexbox Basics

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

Answer key

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

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