MCQs Of Class 14: Flexbox - Part 1
1. What does the display: flex property do?
a) Makes the container a grid
b) Creates a block-level element
c) Defines the container as a flex container
d) Aligns elements horizontally
Answer: c) Defines the container as a flex container
Explanation: The display: flex property turns an element into a flex container, enabling the use of Flexbox properties on its children.
2. What is the default direction for flex items when using Flexbox?
a) Column
b) Row
c) Row-reverse
d) Column-reverse
Answer: b) Row
Explanation: The default flex-direction is row, which arranges the flex items horizontally.
3. Which property is used to change the direction of flex items?
a) flex-flow
b) flex-direction
c) align-items
d) justify-content
Answer: b) flex-direction
Explanation: The flex-direction property is used to change the direction of flex items, either horizontally (row) or vertically (column).
4. What does the justify-content property do in a Flexbox layout?
a) Aligns items vertically
b) Aligns items horizontally
c) Distributes space between items
d) Defines the order of flex items
Answer: b) Aligns items horizontally
Explanation: The justify-content property aligns flex items horizontally within the container (main axis).
5. Which value of justify-content aligns the items at the center of the flex container?
a) flex-start
b) flex-end
c) center
d) space-between
Answer: c) center
Explanation: justify-content: center aligns flex items at the center along the main axis.
6. Which of the following properties aligns items vertically in a Flexbox layout?
a) align-self
b) align-items
c) justify-content
d) flex-wrap
Answer: b) align-items
Explanation: The align-items property is used to align items vertically along the cross axis.
7. Which value of align-items aligns flex items at the top of the container?
a) flex-start
b) center
c) flex-end
d) stretch
Answer: a) flex-start
Explanation: align-items: flex-start aligns the items at the top of the flex container.
8. How can you make flex items fill the entire width of the container?
a) Use flex: 1
b) Use flex-grow: 1
c) Use width: 100%
d) Use justify-content: space-between
Answer: b) Use flex-grow: 1
Explanation: flex-grow: 1 allows the flex item to grow and take up the remaining space.
9. Which property is used to make flex items wrap onto multiple lines?
a) flex-wrap
b) flex-direction
c) flex-grow
d) justify-content
Answer: a) flex-wrap
Explanation: flex-wrap controls whether flex items should wrap onto new lines if there is insufficient space.
10. What happens when flex-wrap: wrap is applied to a flex container?
a) Items stay on a single line
b) Items will wrap onto multiple lines if necessary
c) Items align in columns
d) Items are distributed with equal spacing
Answer: b) Items will wrap onto multiple lines if necessary
Explanation: flex-wrap: wrap allows flex items to move to the next line when there isn't enough space.
11. Which property would you use to align a specific item differently from others in a flex container?
a) align-items
b) align-self
c) justify-self
d) flex-grow
Answer: b) align-self
Explanation: align-self is used to override the default vertical alignment of a specific flex item.
12. What is the default value for flex-wrap?
a) wrap
b) nowrap
c) wrap-reverse
d) auto
Answer: b) nowrap
Explanation: By default, flex items do not wrap, and flex-wrap is set to nowrap.
13. Which of the following is the correct shorthand property for flex-grow, flex-shrink, and flex-basis?
a) flex-flow
b) flex
c) flex-container
d) flexbox
Answer: b) flex
Explanation: The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.
14. Which property is used to control the spacing between flex items along the main axis?
a) align-items
b) justify-content
c) flex-wrap
d) align-self
Answer: b) justify-content
Explanation: justify-content is used to adjust the space between flex items along the main axis (horizontally for row direction).
15. Which value of justify-content ensures equal space between flex items?
a) center
b) space-between
c) flex-start
d) space-evenly
Answer: d) space-evenly
Explanation: justify-content: space-evenly places equal space between all items and around them.
16. Which Flexbox property aligns items along the cross axis?
a) align-items
b) justify-content
c) flex-direction
d) flex-wrap
Answer: a) align-items
Explanation: align-items controls the alignment of items along the cross axis (vertically in row direction).
17. What does flex-grow: 2 do?
a) Makes the item grow twice as fast as others
b) Makes the item twice as wide as others
c) Distributes extra space evenly
d) Makes the item smaller than others
Answer: a) Makes the item grow twice as fast as others
Explanation: flex-grow: 2 allows the item to grow at twice the rate of other items with flex-grow: 1.
18. Which property controls the space distribution between items when they are wrapped in Flexbox?
a) flex-wrap
b) justify-content
c) flex-direction
d) align-content
Answer: d) align-content
Explanation: align-content manages the space between flex lines when items wrap to the next line.
19. Which property is used to change the order of flex items in a container?
a) order
b) align-items
c) flex-grow
d) flex-shrink
Answer: a) order
Explanation: The order property changes the visual order of flex items in a flex container.
20. What is the default value for flex-direction?
a) row
b) column
c) row-reverse
d) column-reverse
Answer: a) row
Explanation: By default, Flexbox arranges items horizontally in a row (flex-direction: row).
21. How can you make items in a flex container take equal space?
a) flex-grow: 0
b) flex-grow: 1
c) flex-basis: auto
d) justify-content: center
Answer: b) flex-grow: 1
Explanation: Setting flex-grow: 1 ensures all flex items take up equal space in the container.
22. What does the align-items: stretch property do?
a) Stretches items to the full height of the container
b) Stretches items to fill the available width
c) Aligns items at the start of the cross axis
d) Aligns items at the center of the cross axis
Answer: a) Stretches items to the full height of the container
Explanation: align-items: stretch makes flex items stretch to fill the cross axis (height in row direction).
23. Which of the following is a valid value for the flex-wrap property?
a) wrap-reverse
b) space-between
c) center
d) auto
Answer: a) wrap-reverse
Explanation: wrap-reverse is a valid value for flex-wrap and wraps the flex items in reverse order.
24. What does the flex-basis property define?
a) The size of the flex container
b) The initial size of the flex item before growing or shrinking
c) The space between flex items
d) The direction of the flex items
Answer: b) The initial size of the flex item before growing or shrinking
Explanation: flex-basis specifies the initial size of a flex item before any growing or shrinking occurs.
25. Which property is used to make flex items shrink if the container is too small?
a) flex-shrink
b) flex-grow
c) flex-basis
d) flex-wrap
Answer: a) flex-shrink
Explanation: flex-shrink specifies how much a flex item should shrink when there is not enough space in the container.
26. Which of the following sets the width of a flex item to its content size?
a) flex-grow: 1
b) flex-basis: auto
c) flex-shrink: 0
d) justify-content: center
Answer: b) flex-basis: auto
Explanation: flex-basis: auto sets the flex item's size to its content's natural size.
27. What happens when flex-grow: 0 is set on a flex item?
a) The item grows to fill available space
b) The item shrinks to the smallest size
c) The item doesn't grow
d) The item aligns in the center
Answer: c) The item doesn't grow
Explanation: flex-grow: 0 means the item will not grow to take up any available space.
28. How do you prevent flex items from growing?
a) Set flex-grow: 0
b) Set flex-wrap: wrap
c) Set justify-content: space-between
d) Set align-items: stretch
Answer: a) Set flex-grow: 0
Explanation: flex-grow: 0 prevents the flex items from growing.
29. Which property controls the size of the flex container in a Flexbox layout?
a) flex-grow
b) flex-basis
c) flex-shrink
d) display: flex
Answer: b) flex-basis
Explanation: flex-basis controls the initial size of flex items before growing or shrinking.
30. Which value of justify-content makes items align at the start of the container?
a) center
b) space-between
c) flex-start
d) space-evenly
Answer: c) flex-start
Explanation: justify-content: flex-start aligns items at the start of the flex container along the main axis.
31. Which property is used to adjust the alignment of items on the cross axis?
a) align-items
b) align-self
c) justify-content
d) align-content
Answer: a) align-items
Explanation: align-items is used to align flex items along the cross axis (vertical for row direction).
32. What is the default value for the flex-wrap property?
a) wrap
b) nowrap
c) wrap-reverse
d) auto
Answer: b) nowrap
Explanation: The default value for flex-wrap is nowrap, meaning flex items do not wrap onto new lines.
33. Which value of flex-direction arranges items vertically from top to bottom?
a) column
b) row
c) row-reverse
d) column-reverse
Answer: a) column
Explanation: flex-direction: column arranges flex items vertically from top to bottom.
34. Which property is used to control how flex items grow or shrink in size?
a) flex-basis
b) flex-grow
c) flex-shrink
d) flex-wrap
Answer: b) flex-grow
Explanation: flex-grow specifies how much a flex item will grow relative to the other items.
35. Which property allows flex items to take equal space when available?
a) flex-grow
b) flex-basis
c) justify-content
d) align-items
Answer: a) flex-grow
Explanation: flex-grow allows items to grow and take equal space in the container.
36. What does flex-shrink: 0 do?
a) Prevents the item from shrinking
b) Causes the item to shrink when there is insufficient space
c) Causes the item to grow
d) Aligns the item at the start of the container
Answer: a) Prevents the item from shrinking
Explanation: flex-shrink: 0 prevents the item from shrinking when the container is too small.
37. Which property is used to align the items on the cross axis?
a) align-self
b) align-content
c) justify-content
d) align-items
Answer: d) align-items
Explanation: align-items aligns flex items on the cross axis (vertical axis in a row layout).
38. How can you center flex items horizontally and vertically?
a) justify-content: center and align-items: center
b) align-items: center and flex-wrap: wrap
c) justify-content: center and flex-grow: 1
d) flex-direction: column
Answer: a) justify-content: center and align-items: center
Explanation: To center items both horizontally and vertically, use justify-content: center and align-items: center.
39. Which value of flex-wrap wraps flex items in reverse order?
a) wrap
b) nowrap
c) wrap-reverse
d) auto
Answer: c) wrap-reverse
Explanation: wrap-reverse causes flex items to wrap in reverse order when wrapping is necessary.
40. Which value of justify-content distributes items with equal space between them?
a) center
b) flex-start
c) space-between
d) flex-end
Answer: c) space-between
Explanation: justify-content: space-between distributes the flex items with equal space between them.
41. Which property defines the space between rows when flex items wrap?
a) align-items
b) align-content
c) flex-direction
d) justify-content
Answer: b) align-content
Explanation: align-content controls the space between flex lines (rows) when items wrap.
42. What does the flex shorthand property include?
a) flex-grow, flex-shrink, and flex-basis
b) flex-wrap, justify-content, and align-items
c) display, align-items, and flex-direction
d) justify-content, flex-grow, and flex-basis
Answer: a) flex-grow, flex-shrink, and flex-basis
Explanation: The flex shorthand property combines flex-grow, flex-shrink, and flex-basis into a single declaration.
43. Which property is used to prevent flex items from shrinking?
a) flex-grow
b) flex-shrink
c) flex-basis
d) align-items
Answer: b) flex-shrink
Explanation: flex-shrink: 0 ensures flex items do not shrink when the container is smaller than the items.
44. What does the flex-basis: 50px property do?
a) Sets the minimum width of the flex item to 50px
b) Sets the initial size of the flex item to 50px
c) Sets the maximum width of the flex item to 50px
d) Shrinks the flex item to 50px
Answer: b) Sets the initial size of the flex item to 50px
Explanation: flex-basis: 50px sets the initial size of the flex item before any growth or shrinking.
45. Which value of flex-direction arranges items horizontally from right to left?
a) row
b) row-reverse
c) column
d) column-reverse
Answer: b) row-reverse
Explanation: flex-direction: row-reverse arranges items horizontally from right to left.
46. Which of the following is the default value for align-items?
a) center
b) flex-start
c) stretch
d) flex-end
Answer: c) stretch
Explanation: The default value for align-items is stretch, which stretches items to fill the container on the cross axis.
47. Which of the following values for justify-content will center items along the main axis?
a) space-between
b) flex-start
c) center
d) space-evenly
Answer: c) center
Explanation: justify-content: center centers items along the main axis.
48. Which property is used to align a single flex item in a flex container?
a) align-items
b) align-self
c) flex-wrap
d) justify-self
Answer: b) align-self
Explanation: align-self is used to align a single flex item within the flex container, overriding the align-items value.
49. Which of the following can be used to create a flexible grid layout with Flexbox?
a) display: grid
b) display: flex
c) display: block
d) display: inline-flex
Answer: b) display: flex
Explanation: display: flex allows you to create a flexible layout with flex containers and items.
50. What does flex-grow: 1 mean in a Flexbox layout?
a) The item won't grow
b) The item will grow to take up remaining space equally
c) The item will shrink to fit the container
d) The item will align at the start of the container
Answer: b) The item will grow to take up remaining space equally
Explanation: flex-grow: 1 allows the item to grow and take up any remaining space in the container equally with other items.
No comments:
Post a Comment