Explore your understanding of CSS Flexbox with this quiz focused on core properties, alignment, and creating adaptable responsive layouts. Learn key aspects of Flexbox used in modern web design and evaluate your knowledge through practical scenarios and concepts that support flexible web interfaces.
Which CSS property allows you to change the main axis direction of a flex container, for example switching a row-based layout to stack items vertically?
Explanation: The correct property is flex-direction, which defines whether flex items are arranged in a row, row-reverse, column, or column-reverse. Justify-content controls alignment along the main axis but does not change the axis itself. Flex-wrap determines whether items can move onto multiple lines but not the direction. Align-items is used for aligning flex items along the cross axis, not for setting layout direction.
In a responsive navigation bar, which property causes a flex item to grow and take up any available space within the container while allowing other items to remain their natural size?
Explanation: flex-grow enables a flex item to proportionally expand and fill remaining space based on its value, which is essential for creating stretchy elements in responsive bars. align-self only sets alignment for a specific item and does not affect sizing. flex-basis sets an item's initial size before remaining space is distributed, but does not cause growth by itself. justify-content arranges the items within the container but does not control the size of individual items.
When designing a sidebar, which property allows you to vertically center all child items inside a flex container if the main axis is set to row?
Explanation: align-items sets the alignment of flex items along the cross axis, making it ideal for vertical alignment in a row-based flex container. flex-flow is a shorthand for flex-direction and flex-wrap and does not control alignment. order changes the display order of items rather than their alignment. flex-wrap affects whether items are forced into a single line or can wrap, but not their alignment.
In a product grid, which property ensures that flex items move to the next line instead of overflowing the container when there’s not enough horizontal space?
Explanation: flex-wrap instructs the browser to wrap flex items onto new lines when the container cannot accommodate them on a single line, crucial for responsive grids. align-content controls the spacing between lines but does not cause wrapping. gap sets the space between items but does not influence line breaks. flex-shrink decides how items shrink to fit the container but does not itself create new rows or wrapping.
If you want all flex items to start with a fixed width before distributing remaining space, which property should you use to define that initial size?
Explanation: flex-basis defines the initial size of a flex item before the extra space is allocated or items are shrunk. This is essential for layouts where a specific starting width is required. align-content arranges rows or columns but does not affect individual item size. min-width sets the minimum size an item can shrink to, but does not always define the default size. flex-direction only changes the orientation of the items, not their sizing.