cssintermediate
CSS Layout Quiz
Flexbox, Grid, positioning, responsive design, and modern CSS layout.
7 questions
By EZ4Code Team
1. Which `display` value enables Flexbox on a container?
flex
flexbox
block-flex
display-flex
Explanation: `display: flex` enables Flexbox on a container, making its direct children flex items. `display: inline-flex` is similar but the container itself is inline. Flexbox is one-dimensional (row or column).
2. What does `justify-content: center` do in a flex container?
Centers items along the main axis
Centers items along the cross axis
Centers text inside items
Centers the container on the page
Explanation: `justify-content` aligns items along the MAIN axis (horizontal for `flex-direction: row`, vertical for `column`). `align-items` aligns along the CROSS axis. `center` packs items in the middle.
3. What does `display: grid` enable?
A one-dimensional layout
A two-dimensional layout with rows and columns
A flex layout
A table layout
Explanation: `display: grid` enables CSS Grid, a two-dimensional layout system (rows AND columns). Flexbox is one-dimensional. Grid is ideal for overall page layout; Flexbox is great for component-level alignment.
4. What does `position: absolute` do?
Positions the element relative to the nearest positioned ancestor (or viewport)
Removes the element from the DOM
Fixes the element to the viewport
Keeps the element in normal flow
Explanation: `position: absolute` removes the element from normal flow and positions it relative to the nearest ancestor with `position` other than `static` (or the viewport if none). `position: fixed` is relative to the viewport. `position: relative` stays in flow but can be offset.
5. What does `@media (max-width: 768px)` do?
@media (max-width: 768px) {
.container { flex-direction: column; }
}Applies styles only when the viewport is 768px wide or less
Applies styles only on mobile devices
Applies styles to elements wider than 768px
Sets the page width to 768px
Explanation: `@media (max-width: 768px)` is a media query — it applies the styles only when the viewport width is 768px or less. This is the basis of responsive design. `min-width` applies when the viewport is at least that wide (mobile-first approach).
6. Which property controls the gap between flex items?
.container {
display: flex;
gap: 16px;
}gap
spacing
flex-gap
margin-gap
Explanation: `gap` sets the spacing between flex items (and grid items). It replaced the old hack of using margins. `row-gap` and `column-gap` target specific axes. `gap` works on both flex and grid containers.
7. What does `flex: 1` mean?
The item grows to fill available space
The item has a fixed width of 1px
The item is hidden
The item is the first child
Explanation: `flex: 1` is shorthand for `flex: 1 1 0` — `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`. The item grows to fill available space proportionally. Two items with `flex: 1` share space equally. `flex: 2` would take twice as much as `flex: 1`.