CSS Worksheet: Flexbox Basics

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

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.

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

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