Assess your knowledge of Tailwind CSS layout techniques, focusing on flexbox utilities, alignment, spacing, and responsive design principles. Improve your understanding of key classes and their effects on flexible and adaptive web layouts with this targeted quiz.
Which Tailwind CSS class would you use to arrange child elements in a vertical column within a flex container?
Explanation: The flex-col class changes the flex direction to column, stacking child elements vertically. While flex-row arranges elements horizontally, items-center is used for cross-axis alignment, not for direction. Content-between relates to spacing between lines rather than defining flex direction, so it does not stack items vertically.
When you want to space out items evenly along the main axis of a flex container, which Tailwind CSS class should you apply?
Explanation: The justify-between class distributes items so that the first item is at the start, the last is at the end, and the remaining space is evenly placed between them. Items-between is an incorrect class name and does not exist. Justify-center centers items but doesn’t add space between them. Space-x-4 adds fixed margin between siblings and is not a flex alignment utility.
If you want flex items to automatically jump to a new line when they overflow the container, which Tailwind CSS utility should you use?
Explanation: The flex-wrap class enables wrapping, allowing flex items to move onto new lines as needed. Flex-nowrap forces all items to remain on a single line. Wrap-flex and flex-gap are not correct class names in this context; flex-gap also does not control wrapping but spacing. Using flex-wrap improves layout flexibility, especially for varying content sizes.
To vertically center items inside a flex container with horizontal flex direction, which Tailwind CSS class is most appropriate?
Explanation: Items-center aligns flex items along the cross axis, which is vertical when using a horizontal (row) flex direction. Justify-center centers items along the main axis, which would be horizontal, not vertical. Align-center and flex-center are not valid class names and would not apply the correct alignment. Using items-center ensures vertical centering in flex layouts.
If you want a flex container to display its items in a row on large screens but switch to a column layout on small screens, what is a correct Tailwind CSS class combination?
Explanation: Flex-col lg:flex-row sets the direction to column by default and switches to row at large screen breakpoints, which achieves the described behavior. Flex-lg-row and flex-sm-col are not valid utility classes. Flex-row md:flex-col switches to column at medium screens, not large, and sm:flex-row would make the row direction apply at slightly larger than the smallest breakpoint, opposite of the requirement.