← Flexbox basics lesson New set →

CSS Worksheet: Flexbox Basics

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

Answer key

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

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