MCQs Of Class 15: Flexbox - Part 2

1. What does `justify-content: space-around` do in Flexbox?

A) Aligns items at the start of the container
B) Distributes items evenly with equal space between them
C) Aligns items to the center
D) Distributes items evenly with equal space around them

Explanation: justify-content: space-around distributes the items evenly with equal space around each item.

2. Which of the following properties is used to wrap items in Flexbox?

A) flex-wrap
B) flex-direction
C) justify-content
D) align-items

Explanation: The flex-wrap property allows items to wrap onto new lines when necessary.

3. What does `flex-wrap: wrap` allow you to do in Flexbox?

A) Align items to the center
B) Distribute items evenly
C) Wrap items to new lines
D) Stretch items to fill the container

Explanation: flex-wrap: wrap allows items to wrap onto new lines when there is insufficient space.

4. In the given code, `flex-direction: column` arranges the items:

A) Horizontally, from left to right
B) Vertically, from top to bottom
C) Vertically, from bottom to top
D) Horizontally, from right to left

Explanation: flex-direction: column arranges items vertically from top to bottom.

5. Which property is used to change the order of items in Flexbox?

A) flex-order
B) order
C) flex-direction
D) flex-grow

Explanation: The order property is used to change the order of items in Flexbox.

6. The `align-items: center` property in Flexbox is used for:

A) Aligning items vertically to the center
B) Aligning items horizontally to the center
C) Stretching items to fit the container
D) Aligning items to the top of the container

Explanation: align-items: center aligns the items vertically to the center in Flexbox.

7. How do you create a Flexbox container in CSS?

A) display: grid;
B) display: flex;
C) display: block;
D) display: inline;

Explanation: To create a Flexbox container, use display: flex;.

8. What happens when you apply `flex-grow: 1` to an item in Flexbox?

A) The item shrinks to fit its container
B) The item grows to take available space
C) The item will not resize
D) The item aligns itself to the top

Explanation: flex-grow: 1 makes the item grow to take up the available space in the container.

9. Which property is used to center the content in Flexbox both horizontally and vertically?

A) align-items: center; justify-content: center;
B) align-content: center; justify-content: space-between;
C) align-items: flex-start; justify-content: space-around;
D) flex-wrap: wrap; justify-content: flex-end;

Explanation: To center content both horizontally and vertically, use align-items: center; justify-content: center;.

10. What does `align-items: flex-start` do in Flexbox?

A) Aligns items to the center
B) Aligns items to the top of the container
C) Aligns items to the bottom of the container
D) Distributes items evenly

Explanation: align-items: flex-start aligns items to the top of the container.

11. What does `flex-direction: row` do in Flexbox?

A) Arranges items vertically
B) Arranges items horizontally
C) Aligns items to the center
D) Stretches items to fill the container

Explanation: flex-direction: row arranges items horizontally, from left to right by default.

12. What does the property `gap: 10px;` do in Flexbox?

A) Adds margin between flex items
B) Defines the space around the container
C) Creates a space between flex items
D) Stretches flex items

Explanation: gap: 10px; creates a gap of 10px between flex items.

13. In a Flexbox layout, what does `justify-content: space-between` do?

A) Distributes items evenly with equal space around them
B) Aligns items to the start of the container
C) Distributes items with equal space between them
D) Aligns items at the center of the container

Explanation: justify-content: space-between distributes items evenly with equal space between them.

14. What does `flex-basis` determine in Flexbox?

A) The width or height of a flex item
B) The amount of space a flex item takes in the container
C) The order of the flex items
D) The direction of the flex container

Explanation: flex-basis specifies the initial size of a flex item before distributing available space.

15. What does `flex-wrap: wrap-reverse` do in Flexbox?

A) Items wrap from top to bottom
B) Items wrap from right to left
C) Items wrap from bottom to top
D) Items wrap from left to right

Explanation: flex-wrap: wrap-reverse makes items wrap from bottom to top.

16. In Flexbox, what does `align-self: center` do?

A) Aligns the item to the center of the container
B) Stretches the item to fill the container
C) Overrides the align-items property for a specific item
D) Moves the item to the left

Explanation: align-self: center overrides align-items and aligns the item to the center vertically.

17. What does `flex-shrink` control in Flexbox?

A) The item’s width
B) The item’s growth
C) The item’s ability to shrink
D) The item’s alignment

Explanation: flex-shrink controls how much a flex item should shrink if the container is too small.

18. How do you create a responsive navigation bar with Flexbox?

A) Use justify-content: space-between and media queries
B) Use align-items: center and media queries
C) Use flex-wrap: wrap only
D) Use display: grid; and media queries

Explanation: You can create a responsive navbar by using justify-content: space-between and media queries to adjust the layout.

19. What does `flex-grow: 0` do in Flexbox?

A) Allows the item to grow and fill available space
B) Prevents the item from growing
C) Shrinks the item
D) Aligns the item to the center

Explanation: flex-grow: 0 prevents the item from growing and makes it take up only the space required.

20. Which of the following CSS properties is used for defining the horizontal layout in Flexbox?

A) align-items
B) justify-content
C) flex-direction
D) flex-wrap

Explanation: justify-content controls the horizontal alignment of items in Flexbox.

21. What is the default value of `flex-direction` in Flexbox?

A) row
B) column
C) row-reverse
D) column-reverse

Explanation: The default value of flex-direction is row, which arranges items horizontally from left to right.

22. How can you change the order of Flexbox items?

A) Using flex-order
B) Using order
C) Using flex-grow
D) Using flex-basis

Explanation: The order property is used to change the order of items in a Flexbox container.

23. What does `align-items: stretch` do in Flexbox?

A) Stretches the flex container
B) Stretches the items to fill the container's height
C) Aligns items vertically to the center
D) Aligns items to the start of the container

Explanation: align-items: stretch stretches the flex items to fill the height of the container.

24. Which of the following CSS properties can be used for creating a Flexbox layout?

A) display: block;
B) display: flex;
C) display: grid;
D) display: inline;

Explanation: display: flex; is used to create a Flexbox layout.

25. In Flexbox, which of the following properties aligns the container's items horizontally?

A) align-items
B) justify-content
C) align-content
D) flex-direction

Explanation: justify-content aligns items horizontally in the container.

26. What does the `order` property in Flexbox do?

A) It sets the flex item size
B) It defines the order in which items are displayed
C) It controls the alignment of items
D) It sets the space between items

Explanation: The order property allows you to define the display order of flex items.

27. What is the default behavior of Flexbox items in terms of spacing?

A) Items have equal space between them
B) Items have no space between them
C) Items stretch to fill the container
D) Items are arranged vertically

Explanation: By default, Flexbox items have no space between them unless you specify justify-content.

28. Which property controls the alignment of flex items vertically in a Flexbox container?

A) justify-content
B) align-items
C) flex-wrap
D) flex-direction

Explanation: align-items controls the vertical alignment of flex items.

29. What does `flex-grow: 2` mean in Flexbox?

A) The item takes twice the space as other items
B) The item does not grow
C) The item takes up less space than other items
D) The item is aligned to the top

Explanation: flex-grow: 2 means the item will grow to take twice the available space as other items with flex-grow: 1.

30. Which of the following is the correct shorthand property for `flex-grow`, `flex-shrink`, and `flex-basis` in Flexbox?

A) flex-shrink: 1;
B) flex: 1;
C) flex-wrap: wrap;
D) display: flex;

Explanation: The shorthand flex: 1; combines flex-grow, flex-shrink, and flex-basis values into one.

31. How do you align flex items to the right of the container in Flexbox?

A) justify-content: flex-start;
B) justify-content: flex-end;
C) align-items: flex-start;
D) align-items: flex-end;

Explanation: justify-content: flex-end; aligns flex items to the right of the container.

32. What does `flex-basis: 200px` do in Flexbox?

A) Defines the maximum size of the flex item
B) Specifies the initial size of the flex item before space distribution
C) Allows the item to grow
D) Shrinks the flex item

Explanation: flex-basis: 200px sets the initial size of the flex item to 200px before distributing available space.

33. Which property helps in defining the size of a Flexbox container?

A) flex-grow
B) flex-shrink
C) flex-basis
D) flex

Explanation: The flex-basis property sets the size of the flex items.

34. What does `align-items: baseline` do in Flexbox?

A) Aligns items based on their bottom edge
B) Aligns items based on their baseline
C) Aligns items to the center
D) Aligns items to the top

Explanation: align-items: baseline aligns items along their baseline (the imaginary line at the bottom of text).

35. What does `flex-wrap: nowrap` do in Flexbox?

A) Items will wrap onto new lines if necessary
B) Items will not wrap and will be displayed in one row
C) Items will wrap in reverse order
D) Items will be stretched to fill the container

Explanation: flex-wrap: nowrap ensures that items do not wrap and are displayed in one row.

36. Which of the following properties defines the main axis in Flexbox?

A) flex-direction
B) align-items
C) justify-content
D) flex-wrap

Explanation: flex-direction defines the main axis (horizontal or vertical) in Flexbox.

37. What happens when you set `flex-grow` to `0` in Flexbox?

A) The item will not grow
B) The item will take up all available space
C) The item will shrink
D) The item will be stretched

Explanation: flex-grow: 0 means the item will not grow and will take only the space it needs.

38. What does `align-self: flex-end` do in Flexbox?

A) Aligns the item to the center
B) Aligns the item to the bottom of the container
C) Aligns the item to the top of the container
D) Aligns the item to the start of the container

Explanation: align-self: flex-end aligns the item to the bottom (end) of the container.

39. How do you make a Flexbox container display its items in a row-reversed order?

A) flex-direction: column-reverse;
B) flex-wrap: wrap-reverse;
C) flex-direction: row-reverse;
D) align-items: flex-start;

Explanation: flex-direction: row-reverse; reverses the order of items in a horizontal row.

40. Which of the following is a valid value for the `align-items` property in Flexbox?

A) top
B) start
C) stretch
D) center-align

Explanation: stretch is a valid value for align-items, which stretches the items to fill the container’s height.

41. What does `justify-content: flex-start` do in Flexbox?

A) Aligns items at the end of the container
B) Distributes items evenly with space between them
C) Aligns items at the start of the container
D) Aligns items in the center of the container

Explanation: justify-content: flex-start aligns items at the start (left side) of the container.

42. How do you create equal spacing between Flexbox items?

A) justify-content: space-around;
B) justify-content: space-between;
C) align-items: center;
D) gap: 20px;

Explanation: justify-content: space-around; creates equal spacing between items in the container.

43. What is the purpose of `align-content` in Flexbox?

A) Controls the alignment of flex items horizontally
B) Controls the alignment of flex items vertically
C) Controls the alignment of the container’s lines
D) Sets the size of flex items

Explanation: align-content controls the alignment of the flex lines within a Flexbox container.

44. What does `flex-grow` do in Flexbox?

A) Specifies the space between flex items
B) Defines how much an item will shrink
C) Specifies the space an item will take up within the container
D) Defines how much an item will grow relative to other items

Explanation: flex-grow defines how much an item will grow to fill available space in the container.

45. What happens when `flex-shrink` is set to `0`?

A) The item will not shrink even if the container is smaller
B) The item will grow to fill the container
C) The item will align to the top of the container
D) The item will be hidden if the container is too small

Explanation: Setting flex-shrink to 0 prevents the item from shrinking if the container becomes smaller.

46. What is the default value of `flex-shrink` in Flexbox?

A) 0
B) 1
C) auto
D) none

Explanation: The default value of flex-shrink is 1, meaning items will shrink if the container is too small.

47. Which Flexbox property controls how items grow or shrink to fill space in the container?

A) flex-grow
B) flex-basis
C) align-items
D) justify-content

Explanation: flex-grow controls how items grow to fill the available space in the container.

48. Which of the following properties is used to control the spacing between rows in a Flexbox layout?

A) gap
B) flex-gap
C) margin
D) justify-content

Explanation: The gap property controls the spacing between rows in a Flexbox layout.

49. What does `flex: 0 1 auto` mean in Flexbox?

A) The item will grow and shrink based on available space
B) The item will not grow or shrink
C) The item will take up the available space equally
D) The item will grow but not shrink

Explanation: flex: 0 1 auto means the item will not grow (0), will shrink if necessary (1), and has an automatic basis (auto).

50. What happens when you set `flex-wrap: wrap-reverse`?

A) Items will wrap in reverse order along the main axis
B) Items will not wrap at all
C) Items will wrap in reverse along the cross axis
D) Items will stretch across the entire container

Explanation: flex-wrap: wrap-reverse makes items wrap in reverse order along the cross axis.

Wednesday, 19 February 2025

MCQs Of Class 15: Flexbox - Part 2